A property is a variable that represents the characteristics of an object (height/width/color...); a method is a function that represents the operation of the object.
In JavaScript, there are two ways to access object properties "." and "[ ]".
1. Use "." "[ ]" to access object properties
1> "."
oBtn.style.width
2> "[ ]"
oBtn.style['width'] //[ ] is a string
2. Methods of accessing objects:
Only use "." eg:
oBtn.functionName()
3. "." and "[ ]" usage scenarios:
The value after "." cannot be modified by you; the value in "[ ]" can be changed at will
eg (with the following code):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
/*
Enter the properties that need to be changed (width/height/color) in the first line of text boxes
Enter the attribute value of the specific style to change in the second line (300px/100px/#fff)
Click the OK button
Make the style of the div change with the style set on the first and second lines
*/
window.onload = function(){
var oAttr = document.getElementById('attr');
var oVal = document.getElementById('val');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById ('div1');
oBtn.onclick = function(){
oAttr.value//Saved 'width'/'height'.....
oVal.value//'200px'/'#000'.....
oDiv.style.width = oVal.value;// . The following values cannot be replaced or modified
/* Can be executed, because the width after "." is fixed and cannot be changed, just assign a value to width*/
oDiv.style.oAttr.value = oVal.value;
/*
It is equivalent to adding <div style = 'oAttr.value'></div> in the div, but the style does not have oAttr.value, and oAttr.value will always change because of the value, and the result will report an error
*/
oDiv.style[oAttr.value] = oVal.value;// The value in [] can be modified (is a string)
/* "." in JS is allowed to be replaced with "[]", which has no effect. For example: oBtn['onclick']= function(){} */
}
}
</script>
<body>
Please enter the attribute name: <input type="text" id="attr">
Please enter the attribute value: <input type="text" id="val">
<input type="button" value="确定" id="btn1">
<div id="div1"></div>
</body>
</html>