控制div属性的变化
程序员文章站
2022-05-29 18:14:37
...
简单功能
通过点击按钮实现div样式的简单变化
效果如下：
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul, li {
list-style: none;
}
ul {
display: flex;
width: 500px;
height: 50px;
margin: 0 auto;
}
li {
box-sizing: border-box;
flex: 1;
justify-content: center;
text-align: center;
line-height: 50px;
border: 1px solid #000;
}
div {
width: 100px;
height: 100px;
background-color: #000;
margin: 50px auto 0;
}
</style>
</head>
<body>
<ul>
<li>变宽</li>
<li>变高</li>
<li>变色</li>
<li>隐藏</li>
<li>重置</li>
</ul>
<div class="div"></div>
<script>
function change() {
var oDiv = document.getElementsByClassName('div')[0];
var oLi = document.getElementsByTagName('li');
var cssName = ['width', 'height', 'background', 'display', 'cssText'];
var cssValue = ['200px', '200px', 'red', 'none', ' '];
for(let i = 0; i < oLi.length; i++) {
oLi[i].onclick = function() {
//下面注释的为什么不行
// oDiv.style.cssName[i] = cssValue[i];
oDiv.style[cssName[i]] = cssValue[i];
}
}
}
change();
</script>
</body>
</html>
遇到的问题
for(let i = 0; i < oLi.length; i++) {
oLi[i].onclick = function() {
//下面注释的代码为什么不行
// oDiv.style.cssName[i] = cssValue[i];
oDiv.style[name[i]] = cssValue[i];
// console.log(typeof odiv.style); object
// 含有特殊字符不能用'.'来访问，需要用'[]'来访问
}
}
2.通过dom操作添加的css样式属于行间样式
3.amazing
<script>
var arr = ['width', 'height', 'background', 'display', 'display'];
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
var name = ['width', 'height', 'background', 'display', 'display'];
for(var i = 0; i < name.length; i++) {
console.log(name[i]);
}
</script>
当在控制台输出后，我惊呆了，欲知结果如何，一试便知
查资料后发现
在javascript中name既不是保留字，也不是关键字，但在window对象中有一个属性是 window.name
window.name 是一个字符串，所以当你声明name变量的时候,相当于给window.name赋值,所以只能为字符串
上一篇： CSS3文本效果
下一篇： 在HANA中寻求大数据突围