3.操作CSS

摘要：
我们已经知道了JavaScript可以控制HTML文档的逻辑结构和内容。通过对CSS编程，Javascript也可以控制文档的外观和布局。接下来讲解几种JavaScript可以用来操作CSS的不同技术。

3.1 css类

使用JavaScript影响文档内容样式的最简单方式是给HTML标签的class属性添加或删除CSS类名。Element对象的classList属性可以来方便的实现此类操作。

下面这个例子：

 //假设“tool”元素在html中有class=“hidden”
   document.querySelector("#tool").classList.remove("hidden")//这样使它变得可见
   document.querySelector("#tool").classList.add("hidden");

3.2行内样式

继续前面工具提示条（tooltip）的例子，假设文档的结构中只包含一个提示条元素，而我们想在显示他之前动态把它定位好。一般来说，我们不可能值对提示条的所有可能位置都创建一个类，因此classList属性不能用于定位。

这种情况下，我们需要用程序修改提示条在HTML中的style属性，设置指针对于他自己的行内样式。DOM在所有Element对象上都定义了对应的style属性。但与大多数景象属性不同，这个style属性不是字符串，而是CSS样式文本解析之后。但与大多数镜像属性不同，这个style属性不是字符串，而是CSSStyleDeclaration对象，是对HTML中作为style属性的css样式文本解析之后得到一个表示。要在JavaScript中显示和设置提示条的位置可以使用类似下面的代码：

<script>
  function displayAt(tooltip,x,y){
    tooltip.style.display = "block";
    tooltip.style.position = "absolute"
    tooltip.style.left=`${x}px`;
    tooltip.style.top = `${y}px`;
  }
</script>

在使用CSSStyleDeclaration的样式属性时，要记住所有值都必须是字符串。在样式表或style属性里，可以这样写：

 display: block;
 font-family: 'Courier New', Courier, monospace;
 background-color: #ffffff;

但在JavaScript要对元素e设置相同的样式，必须给所有的值都加上引号:

e.style.display = "block"；

e.style.fontFamily = "sans-serif";

e.style.background = "#fffff"

有时候，以字符串而非CSSStyleDeclaration对象形式设置和读取行内样式惠更方便。为此，可以使用Element的getAttribute（）和setAttribute()方法，或者也可以使用CSSStyleDeclaration对象的cssText属性：

//把元素e的行内样式赋值给元素f
    f.setAttribute("style",e.getAttribute("style"));
    //或者,这样也可以
    f.style.cssText = e.style.cssText;

4.3计算样式

元素的计算样式 (computed style）是浏览器根据一个元素的行内样式和所有样式表中适用的样式规则导出（或计算得到）的一组属性值，浏览器实际上使用这组屈性值来显不该元素。与行内样式类似，计算样式同样以CSSStyleDeclaration 对象表不。但与行內样式不同的是，计算样式是只该的，不能修改计算样式，但表示一个元素计算样式的CSSStyleDeclaration 对象可以让你知道浏览器在渲染该元素时，使用了哪些厲性和值。使用window对象的getComputed()方法可以返回一个元素的计算样式。这个方法的第一个参数是要查询的元素，可选的第二个参数用于制定一个CSS伪元素（如：:before 或：：after）：

let title = document.querySelector("#sectiontitle")
    let styles = document.getComputedStyle(title)
    let beforeStyles = window.getComputedStyle(title,"::before");

getcomputedstyle(）返回的 CSSStyleDeclaration 对象中包含的属性，通當要比行内style 属性对应的 CSSStyleDeclaration 对象多很多。但计算样式比较难说，查询它们并一定总能得到想要的信息。以font-family 属性为例，它接收逗号分隔的宇体族的列表，以实现跨平台兼容。在查询计算样式的fontFamily 属性时，只是得到应用给元素的最特定于 font-family 样式的值，这可能会返回类似“arial,helvetica sans-serif”这样的值，并不说明实际使用了哪种字体。再比如，如果某元素没有被绝对定义，通过计算样式查询其 top 和left 属性经常会返回 auto。这是个合法的CSS值，但却不一定是你想找的。

4.4操作样式表

除了操作class属性和行内样式，JavaScript也可以操作样式表，样式表是通过<style>标签或<link rel = "stylesheet">标签与HTML文档关联起来的。这两个标签都是普通的HTML标签，因此可以为他们指定一个id属性，然后使用document.querySelector()找到它们。style和link标签对应的Element对象都有disabled属性，可以用它禁用整个样式表。

比如，可以像这个例子一样：

function toggleTheme(){
        let lightTheme = document.querySelector("#light-theme");
        let darkTheme = document.querySelector("#dark-time");
        if(darkTheme.disabled){
            lightTheme.disabled = true;
            darkTheme.disabled = false;
        }else{
            lightTheme.disabled =false;
            darkTheme.disabled = true;
        }
    }

4.5CSS动画与事件

假设你的样式表中定义了下面两个CSS类：

.transparent{opacity: 0;}
.fadeable{transition:opacity .5s ease-in}

如果把第一个样式应用给某个元素，该元素会变成完全透明，不可见。而第二个样式中的过度属性会告诉浏览器当元素的不透明变化时，改变话应该在0.5秒的时间内以动画的形式呈现。其中的ease-in要求不透明度的变化应该先快后慢。

  <style>
       .transparent{opacity: 1;}
       .fadeable{transition:opacity .5s ease-in}

    </style>
</head>
<body>
   <div id="subscribe" class="fadeable notification">12331</div>

</body>
<script>
  document.querySelector("#subscribe").classList.add("transparent")
</script>

JavaScript也可以用来监控CSS过度动画的进度，因为浏览器在过度动画的开始和结束都会触发事件。首次触发过度时，浏览器会派发“transitionrun”事件。这时候可能指定transition-delay样式，而当动画完成时，则会派发“transistionend”事件。当然，所有这些事件的目标都是发生动画的元素。这些事件传给处理程序的事件对象是一个TransitionEvent对象。该对象的propertyName属性是发生动画的CSS属性，而“transistionend”时间对应的时间对象的elapsedTime属性是从“transistionstart”事件开始经过的秒数。

标签：style,元素,浏览器,样式,JavaScript,CSS,属性
From： https://www.cnblogs.com/user-zbb/p/17110089.html

浏览器中的JavaScript（3）