JavaScript-操作元素属性

一、操作元素属性

1.操作属性的方法

(1)“  . ” 操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 操作元素属性</title>
    <script type="text/javascript">
        var box = document.getElementById("header");
        //box.style.background.color="green"; 执行报错
        box.style.backgroundColor="green";  //有-的属性,需要去掉“-”,以连接后的首字母为大写
    </script>
</head>
<body>
    <!--id/class/title/style 都是这个div的属性,都可以通过获取到的节点对属性进行操作-->
    <div id="header" class="di" title="这是一个头部的div" style="background-color: red">这是一个div</div>
</body>
</html>

(2)” [] ” 操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 操作元素属性</title>
    <script type="text/javascript">
        var box = document.getElementById("header");
        box["style"].backgroundColor="blue"; //有-的属性,需要去掉“-”,以连接后的首字母为大写
    </script>
</head>
<body>
    <!--id/class/title/style 都是这个div的属性,都可以通过获取到的节点对属性进行操作-->
    <div id="header" class="di" title="这是一个头部的div" style="background-color: red">这是一个div</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39620483/article/details/84305660
今日推荐