欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript 学习笔记 1 : 控制元素样式

程序员文章站 2022-07-04 19:30:47
...

通过设置元素节点的 class 属性或 style 属性，可以控制元素节点的 CSS 样式。

通过设置元素的 class 属性，可以为元素指定一个 CSS 类。

方式一 方式二 方式三
IE 11 √ × √
IE 6、7 × ？ √
Firefox 65 √ × √ 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>李商隐</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            font-size: 14px;
        }

        .bold {
            font-size: 22px;
        }
    </style>
</head>
<body>
<p><span id="lishangyin">红楼隔雨相望冷，珠箔飘灯独自归</span></p>
<p>
    <button type="button" onclick="changeFontClass()">改变大小</button>
</p>
<p>
    <button type="button" onclick="changeFontColor()">改变颜色</button>
</p>
<p>
    <button type="button" onclick="resetFontStyle()">重置样式</button>
</p>

<script type="text/javascript">
    function changeFontClass() {
        //方式一
//        document.getElementById("lishangyin").setAttribute("class", "bold");
        //方式二
//        document.getElementById("lishangyin").setAttribute("className", "bold");
        //方式三
        document.getElementById("lishangyin").className = "bold";
    }
    function changeFontColor() {
        document.getElementById("lishangyin").style.backgroundColor = "red";
    }
    function resetFontStyle() {
        document.getElementById("lishangyin").removeAttribute("style");
        document.getElementById("lishangyin").removeAttribute("class");
    }
</script>
</body>
</html>

元素的 style 属性是一个对象，保存了元素的 CSS 样式信息，并按照特定的命名规则与 CSS 属性相对应。

  1. 如果 CSS 属性由单个单词组成，则 style 对象的属性名即该单词，例如 color 对应 color。
  2. 如果 CSS 属性由多个单词组成，则 style 对象的属性名即去掉连接符-后使用驼峰命名法命名，例如 background-color 对应 backgroundColor。
  3. 如果 CSS 属性是 JavaScript 保留字，则 style 对象的属性名即该单词首字母大写然后加上style前缀，例如float对应styleFloat。
相关标签： JavaScript CSS class style

上一篇： nginx结合keepalived实现高可用的完整步骤

下一篇： 深入理解计算机系统 练习题 2.25

推荐阅读