<!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>
|