<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style>
div{
width: 200px;
height: 200px;
background-color: deepskyblue;
text-align: center;
/* 要设置文字上下居中的话，就将他的行高设置成和高度一样的*/
line-height: 200px;
}
</style>
</head>
<body>
属性：<input type="text" name="attr" value="" placeholder="请输入属性"><br>
属性值：<input type="text" name="attrValue" value="" placeholder="请输入属性值"><br>
<button>设置属性</button>
<div>JavaScript有点意思</div>
<script>
var btn = document.getElementsByTagName('button')[0]
var box = document.getElementsByTagName('div')[0]
btn.onclick = function () {
//这里要获取的只是标签，而不是标签的值
var attr = document.getElementsByName('attr')[0]
var attrValue = document.getElementsByName('attrValue')[0]
box.style[attr.value] = attrValue.value
//获取完要设置的样式之后，将框内的值去掉
attr.value = ''
attrValue.value = ''
}
</script>
</body>
</html>
扫一扫
1718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
