Dom编程——Element，改变样式

最新推荐文章于 2025-04-10 09:57:53 发布

goucheng112

最新推荐文章于 2025-04-10 09:57:53 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascriprt dom styleSheet

本文链接：https://blog.youkuaiyun.com/goucheng112/article/details/82532688

怎样创建一个新的element

      var p =  document.createElement("p")
      p.id="dwdw";
      p.class="dwdw"

Element的之间的关系参考node之间的关系

parentElement（）
children（）
previousElementSibling（）
nextElementSibling（）
childElementCount（）

element关于特性的操作的方法

setAttribute() 设置一个属性和值
getAttribute() 得到属性和值
removeAttribute() 删除属性和值

hasAttribute（）判断是否有这个属性

****小结***

setAttribute()可以设置正常的属性（id，class），也可以设置非标准的属性，但需要在前面机上“data-”开头

setAttribute()设置的非标准属性不能通过"div.id"这样的方式访问，可以用getAttribute() 也可以用dataset访问

那么在用getAttribute()和"div.id"访问正常的属性的值的时候有什么区别吗？最大的区别在会在你访问style属性的时候发现。点方法返回的是数组，getAttribute（）返回的是字符串。

你会发现访问class也不能直接通过“div.id”这样的方式，要通过className和classList前者返回一个字符串，后者返回一个伪数组

怎样访问样式呢

通过style访问和改变样式

 <script>
     var box = document.getElementById("box");
     box.style.width="300px"
     box.style.background="red"
 </script>

但这样只是在html文档中给标签添加style属性来改变样式。我们还有什么方法改变样式呢？

1.我们可以提前写好要修改的样式放在样式表中，通过css的选择器来用不同的样式，例如改变class属性的值。这种情况可以应用到我们知道某个标签会怎么改变的情况。

2.我们可不可以直接操作样式表呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   <style>
    #box{
        width:100px;
        height:200px;
        background-color: red;
    }
.jj{
    display: block
}
   </style>
</head>

<body>
    <div id="box">
        <div>我是Div，请选中我</div>
        <span class="jj">我是span，请不要选我</span>
     </div>
    <script>
     var sheet = document.styleSheets[0];//找的是第一个样式表
     var rules = sheet.cssRules||sheet.rules;//把第一样式表中的规则，按照数组排列出来。
     var rule = rules[0]//找到的第一个样式表中的第一个规则，#box。
     rule.style.backgroundColor="blue"//改变背景颜色为蓝色
</script>
</body>

</html>

规则的创建，插入和删除

insertRule()，addRule(),deletRule()。