JS-DOM样式操作

Posted 2021-03-07 是非_大道克己

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-DOM样式操作相关的知识，希望对你有一定的参考价值。

js样式操作

行内式样式操作

//行内式属性的获取
    let value = 元素对象.style.属性名;
    //得到的值为String类型,如果要做算术运算需要转型
    //仅能得到行内式属性的值，对于嵌入式、外联式的值无法获取
    //属性名需要注意如果在css中唯一个单词则是原单词，如果在css中为多个单词则遵守驼峰命名法

    元素对象.style.属性名 = "value";
    //为属性赋值的内容也是String

JS-DOM动画-小球水平往返

//<body>
//    <div style=" position: absolute;top: 50px; height: 100px; width: 100px;
//    background-color: brown;left: 100px;">
//    </div>
//    <button>开始</button>
//    <button>暂停</button>
//</body>


let buttomList = document.querySelectorAll("button");

let divObj = document.querySelector("div");

let id;

//得到客户区宽度
let userWidth = document.documentElement.clientWidth;

let flag = 1;

buttomList[0].onclick = () => {
    if(id == undefined){
        id = window.setInterval(() => {
            let leftLength = divObj.style.left;
            if (parseInt(leftLength) + 100> userWidth) {
                flag = -1;
            }
            leftLength = (parseInt(leftLength) + 50 * flag) + "px";
            divObj.style.left = leftLength;
            if (parseInt(leftLength) < 50) {
                flag = 1;
            }
        }, 100)
    }
}

buttomList[1].onclick = () => {
    window.clearInterval(id);
    id = undefined;
}

内嵌式、外联式样式操作

// 外部操作样式表

//1 CSSStyleSheet 对象对象集合

    var styleSheetList =  document.styleSheets;
    //CSSStyleSheet 对象表示一个单独的 CSS 样式表。
    //及·html中一个style元素块,或一个连接的外部css文件
    //CSS 样式表由 CSS 规则组成，可以通过 CSSRule 对象操作每条规则
    //CSSStyleSheet 对象允许您查询、插入和删除样式表规则。
    
// 2 获取你要操作的样式表对象

    var styleObj = styleSheetList[0];
    //把单独的样式表提取出来，下标的数值与在文档中的书写顺序有关

// 3 获得style对象的样式规则的集合(数组)

    var cssRulesList =   styleObj.cssRules;
    //一个样式表中包含一个或多css规则(选择器)，通过cssRules属性将其全部提取出来

// 4 获得CSSStyleRule 样式规则对象

    var cssRuleObj = cssRulesList[0];
    //去除第一规则(选择器)对象

// 5 通过样式规则对象的style对象对应的属性

    var w = cssRuleObj.style.width;
    //查询提取出来的规则中的属性值


    var w = document.styleSheets[0].cssRules[0].style.width;
    //这是上诉步骤的简写方式

//兼容性   
    // cssRules 该属性只在 谷歌 和 火狐有效    iE不支持
    // rules   该属性只有 iE支持 谷歌支持   但是 火狐不支持
    
    var w = document.styleSheets[0].rules[0].style.width;
    //使用rules提取出规则集合

    var w = document.getElementsByTagName("div")[0].currentStyle.width;
    //IE 

//兼容性写法
    var styleObjlist = document.styleSheets[0].cssRules                     
                            ||document.styleSheets[0].rules;
    var value = styleObjlist.style.width;

最终样式操作

//最终样式的读取

    var colorValue = divObj.currentStyle.color;
    //在Ie中 每个对象（元素） 都有都有一个currentStyle对象

    var styleObj =  window.getComputedStyle(元素对象);
    var colorValue = window.getComputedStyle(divObj).color;
    //火狐中 getComputedStyle(元素)

    // 操作最终样式 只能是只读的。   divObj.currentStyle.color="blue" (不能写，不能设置值);
    // 如果要设置值： 请用  元素对象.style.样式属性 = 指


//  兼容性写法
    /**
     * obj: 元素对象
     * attrString： 属性名（字符串）
    **/
    function  getCssStyle(obj,attrString){
        if(document.all){
            return  obj.currentStyle[attrString];
        }else{
            return  window.getComputedStyle(obj)[attrString];
        }
    }

   return  document.all? 
       obj.currentStyle[attrString] : window.getComputedStyle(obj)[attrString];
    //还可以使用三目运算符简写

以上是关于JS-DOM样式操作的主要内容，如果未能解决你的问题，请参考以下文章

JS-DOM

高性能JS-DOM

JS-DOM . 01 了解DOM,动手做一下就明白了！

[JS-DOM]事件监听机制

JS-DOM对象

JS-DOM节点操作