js的dom的style属性的知识

最新推荐文章于 2022-07-24 01:33:02 发布

2333!!!!!

最新推荐文章于 2022-07-24 01:33:02 发布

阅读量912

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122464478

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的dom的style属性的问题</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            margin: 50px auto;
            background-color:hotpink ;
            /* background-color:hotpink !important;*/
        }
    </style>
</head>
<body>
<button id="c">内联样式style属性变化</button><button id="s">获取下面盒子的当前属性(指定性)</button><button id="X">浏览器的函数判断有无</button>
<div class="box1">
</div>
<script type="text/javascript">
    /*js的dom元素.style属性只能操作内联样式不能操作样式表(内部样式表/外部样式表)*/
    /*若内联样式中没有style会新创建一个style并添加属性为其赋值*/
    var box1=document.querySelector(".box1");
     console.log(box1);
    var c=document.getElementById("c");/*这是对style属性的应用来修改内联样式的属性*/
    var s=document.getElementById("s");/*获取这个盒子的当前属性的应用变量*/
    var X=document.getElementById("X");/*这是来判断window的属性有误的变量dom*/
    c.onclick=function(){
      console.log(box1.style.width);
      // box1.style.width="100px";
        /*若行内没有内联样式获取他的style里的属性是空没有报错
        *dom.style.*会返回完整的字符串值包含px的单位
        * 因为 我们的style的就近原则所以dom.style的属性会优先显示
        * 但是css的属性中若包含!important则不会被改变样式 比如:background-color:hotpink !important;
        *因为js的标签内不能使用-,+命名是因为+-也是关键字运算符
        * 所以属性中有-号连接的属性去掉-使用驼峰命名法就好了
        * 比如:
        */
        box1.style.backgroundColor="red";//background-color:hotpink;
        /*在IE中我们可以通过该dom.currentstyle来获取当前的样式,但其他浏览器都不支持,而且win10也没有ie所以88*/
        /*我们可以通过这个函数来获取元素的当前显示样式style*/
        /*他有两个参数第一个是元素
        第二个是伪类元素所以不用他就填null
        *我们没有伪类元素就填null
        */
        console.log("当前dom的width:"+getComputedStyle(box1,null).width);/*打印当前盒子的宽*/
        /*getComputedStyle(box1,null).width="200px";无法修改样式报错了*/
    }
    /*我们还能通过函数参数的方式来获取指定的当前样式*/
    s.onclick=function(){
        let queryStyle=prompt("请填入你需要查看的样式属性值(只指定下面盒子的样式/*驼峰命名法首字母小写*/)");/*这是弹出一个输入框接受值*/
        /*getcomputedstyle不写死指定的属性不能用.要使用中括号来包含参数
        * getcomputedStyle(!需要获得属性的dom元素!,!他的伪元素/null!)[你的参数(需要指定的style属性)]
        * */
        if (queryStyle!=""&&queryStyle!=null) {
            alert(queryStyle + ":" + getComputedStyle(box1, null)[queryStyle]);
        }else{
            alert("空");
        }
    }
    /*拓展了属于是*/
    X.onclick=function() {
        let query=prompt("请输入浏览器的函数名来检测有无");
        if (window[query]) {
             alert("有这函数是true");
        } else {
            alert("无这函数是false")
        }
    }

</script>

</body>
</html>

2333!!!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的dom的style属性的知识

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js.
复制链接

扫一扫