中和: 從 Javascript 修改 CSS

2022年9月17日星期六

從 Javascript 修改 CSS

<!DOCTYPE html>
<html><head></head>
<body>
<p id="foo">hello world</p>
<script>
    var foo = document.getElementById('foo');
    foo.style.color = 'blue';
    foo.style.fontWeight="bold";
    foo.style.fontSize="20px";

    // 函數-橫槓式
//    foo.style.setProperty("background-color","lightblue");

    // 函數-簡寫式
//    foo.style.setProperty("background","lightblue");

    // 函數-駝峰式（失敗，無此方式）
//    foo.style.setProperty("backgroundColor","lightblue");

    // 陣列-橫槓式
//    foo.style['background-color'] = '#ddd';

    // 陣列-駝峰式
//    foo.style['backgroundColor'] = 'lightyellow';

    // 陣列-簡寫式
//    foo.style['background'] = 'blue';

    // 橫槓式 (失敗，無此方式)
//    foo.style.background-color = "#eeb";

    //駝峰式
//    foo.style.backgroundColor = 'yellow';

    //簡寫式
//    foo.style.background = 'rgb(200,150,100)';
</script>
</body>
</html>

2022年9月17日 星期六

從 Javascript 修改 CSS

2022年9月17日星期六