JS如何获取和修改CSS伪类属性

时间 2019-12-05

原文原文链接

DOM操做是操做HTML文档，那么js如何与CSS相联系，标题是小编所要说的重点，可是先总结一下JS如何读取标签CSS属性方法，直接看的话能够去看第三点。javascript

对象.style.属性css

这种方法只能读取行间的CSS属性，但他特别在经过js只能采起这种方法去改变标签样式(也是至关于在行间加属性值)，因此能够看出行间样式优先级大于写在CSS中(除非在属性后加上 !important)html

window.getComputedStyle(对象,null).属性java

这个方法就是至关于获取“真实”对象属性，实际页面中是多少就是多少。像这样咱们直接输出div.style.height就是行间的值200px，在控制台打印window.getComputedStyle(div,null).height就会输出100px。ui

<style> *{ margin:0; padding:0; } div{ width: 100px; height: 100px !important; background-color: red; } </style>
  <body>
      <div style="height: 200px"></div> 
      <script> var div=document.getElementsByTagName('div')[0]; console.log(div.style.height); </script>
  </body>
复制代码

如何获取伪类CSS属性spa

重点小编是想补充一下这个伪类能够说是彻底属于CSS中产生的，咱们一样能够经过window.getComputedStyle方法实现。code

div{
    width: 100px;
    height: 100px !important;
    background-color: red;
}
div::before{
    content: "123";
    background-color: #fff;
}
复制代码

返回结果以下： cdn

那么同时通常的伪类属性在js之中经过修改类名去更改，为了不代码的耦合因此讲盒子自身属性以行内式书写。

看实例：htm

<style> .white::before{ content: "123"; background-color: #fff; } .orange::before{ content: "123"; background-color: orange; } </style>
</head>
<body>
    <div class="white" style="height: 100px; width: 100px; background-color: red;"></div> 
    <script> var div=document.getElementsByTagName('div')[0]; div.onclick=function(){ div.className="orange"; } </script>
</body>
复制代码