首页 > Web开发 > 详细

JS-DOM样式操作

时间:2020-02-27 21:07:38      阅读:30      评论:0      收藏:0      [点我收藏+]

标签:block   提取   书写   方式   css   func   

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样式操作

标签:block   提取   书写   方式   css   func   

原文:https://www.cnblogs.com/-Archenemy-/p/12374099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号