1. 改变标签的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{ width: 200px; height: 200px; background: red; } </style> <script> // 看到下面的代码,有些同学可能就有疑问了.是不是可以将下面的三个函数进行合并呢? // 通过观察我们发现在函数中有两处不同,一个是具体的样式,含有一个就是样式的值. // 所以在合并的时候,函数的入参需要两个,例如下面的函数. function setStyle(name, value){ var oDiv = document.getElementById('div1'); // name: 代表的就是div标签的样式style中的某个属性的名称 // 这样的方式,属于第二种操作属性的方式, 要选取的属性是可以变化的,而不是写死的. oDiv.style[name] = value; } /* function toWidth(){ var oDiv = document.getElementById('div1'); oDiv.style.width = '400px'; } function toHeight(){ var oDiv = document.getElementById('div1'); oDiv.style.height = '400px'; } function toGreen(){ var oDiv = document.getElementById('div1'); oDiv.style.background = 'green'; } */ </script> </head> <body> <input type="button" value="变宽" onclick="setStyle('width', '400px')"> <input type="button" value="变高" onclick="setStyle('height', '400px')"> <input type="button" value="变绿" onclick="setStyle('background', 'green')"> <!-- <input type="button" value="变宽" onclick="toWidth()"> <input type="button" value="变高" onclick="toHeight()"> <input type="button" value="变绿" onclick="toGreen()"> --> <div id="div1"></div> </body> </html>
2. 操作属性的两种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
200px;
height: 200px;
background: red;
}
</style>
<script>
// 看到下面的代码,有些同学可能就有疑问了.是不是可以将下面的三个函数进行合并呢?
// 通过观察我们发现在函数中有两处不同,一个是具体的样式,含有一个就是样式的值.
// 所以在合并的时候,函数的入参需要两个,例如下面的函数.
function setStyle(name, value){
var oDiv = document.getElementById('div1');
// name: 代表的就是div标签的样式style中的某个属性的名称
// 这样的方式,属于第二种操作属性的方式, 要选取的属性是可以变化的,而不是写死的.
oDiv.style[name] = value;
}
/* function toWidth(){
var oDiv = document.getElementById('div1');
oDiv.style.width = '400px';
}
function toHeight(){
var oDiv = document.getElementById('div1');
oDiv.style.height = '400px';
}
function toGreen(){
var oDiv = document.getElementById('div1');
oDiv.style.background = 'green';
} */
</script>
</head>
<body>
<input type="button" value="变宽" onclick="setStyle('width', '400px')">
<input type="button" value="变高" onclick="setStyle('height', '400px')">
<input type="button" value="变绿" onclick="setStyle('background', 'green')">
<!-- <input type="button" value="变宽" onclick="toWidth()">
<input type="button" value="变高" onclick="toHeight()">
<input type="button" value="变绿" onclick="toGreen()"> -->
<div id="div1"></div>
</body>
</html>
说明：
当你要改的这个属性不固定的时候，选择用方括号的方式来操作属性
当你要改的这个属性是固定的（或者说是确定的时候），推荐使用第一种方法。
凡是能用打点调属性的方式，都可以用方括号的方式替换；反过来是不成立的，因为方括号可以操作变化的属性。