1. Style operation:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* After clicking the button, modify the style of box 1
*/
//Get the button and box 1
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//Define a variable
var l = 100;
//Binding a single-click response function to btn01
btn01.onclick = function(){
/*
* Modify the style of the element
* Syntax: element. style. style name = style value;
* Note that the style name has - cannot be written directly
* image
* background-color
* border-width
* border-left-style
* - This style name with - needs to be modified to a hump nomenclature and then operated on
* Remove - and then capitalize the letter after -
* backgroundColor
* borderWidth
*
* - The styles modified by style are all inline styles of elements.
* Inline styles have the highest priority, so the styles we modify through JS are often displayed immediately.
* But if! important is added after the style, it cannot be overridden by inline style.
* So we should try to avoid using important!
*/
l += 10;
//Modify the width of box 1
box1.style.width = l + "px";
box1.style.height = l + "px";
//Modify the background color to yellow
box1.style.backgroundColor = "yellowgreen";
};
btn02.onclick = function(){
/*
* Syntax:
* Element. style. Style name
*
* - Only inline styles can be read through style, but styles in style sheets can not be read.
* If there is no inline style, it cannot be read
*/
//Read the style of box 1
alert(box1.style.backgroundColor);
};
};
</script>
</head>
<body>
<button id="btn01">modify style</button>
<button id="btn02">Read style</button>
<div id="box1"></div>
</body>
</html>
2. Browse compatible operation:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 100px;
background-color: red;
width: 500px;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* After clicking the button, modify the style of box 1
*/
//Get the button and box 1
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//Binding a single-click response function to btn01
btn01.onclick = function(){
/*
* The current valid style of the read element
* Syntax: element. current Style. style name
*
* currentStyle Only IE browser support, in other browsers do not work well
*/
//alert(box1.currentStyle.width);
/*
* Normal browsers need to use a getComputedStyle() method to get the current style
* This method is the Windows method, which can be used directly.
* Parameters:
* 1.Elements to get styles
* 2.The pseudo class of the element to be retrieved can pass null if it is not necessary
*
* - This method returns an object in which the current style of the element is encapsulated.
*
* - Note that browsers IE8 and below do not support this method
*
* - Styles read through current Style and getComputedStyle() are read-only and cannot be modified.
* If you need to modify, you need to use style.
*
*/
//var st = getComputedStyle(box1 , null);
//alert(st.width);
//alert(getComputedStyle(box1 , null).width);
//getComputedStyle(box1 , null).width = "300px";
//alert(getComputedStyle(box1 , null).width);
//alert(box1.currentStyle.width);
alert(getStyle(box1 , "width"));
};
};
/*
* getComputedStyle()Browsers for IE9 and above
* currentStyle Browsers for IE8 and below
* In order to be compatible with all browsers, we need to customize a function to get the style of the element.
*/
/*
* The current style used to retrieve any element
* Parameters:
* obj Elements to get styles
* name Name of the style to be retrieved
*
* When reading the style of an element, if the element does not have a style set,
* Browsers like Firefox and Chrome automatically calculate the style values of elements
* IE browser, if used, will not automatically calculate, but return default values, such as width will return auto
*
*/
function getStyle(obj , name){
//Determine whether the browser contains getComputedStyle
if(window.getComputedStyle){
//Support normal browsers
return getComputedStyle(obj,null)[name];
}else{
//Only support IE
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">Read style</button>
<button id="btn02">Read style</button>
<div id="box1" ></div>
</body>
</html>
3. Other style-related attributes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: silver;
margin-top: 20px;
/*Set borders*/
/*border: 10px solid red;
padding: 100px;*/
}
</style>
<script type="text/javascript">
window.onload = function(){
//Get the button and box 1
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
/*
* clientWidth
* clientHeight
* - Get the visible width and height of the element
* - The values obtained include the content area and inner margin of the element
* - These attributes are read-only and can only be seen and not modified.
*/
//alert(box1.clientHeight);
//box1.clientHeight = "500px" ;
/*
* offsetWidth
* offsetHeight
* - You can use it to get the size of the entire visible box of the element
* - The values it gets, including content areas, inner margins, and borders
*/
//alert(box1.offsetWidth);
/*
* offsetParent
* - You can return the positioned parent element of the current element
* - Locate the parent element, the ancestor element closest to the current element that opens the location
* If all ancestral elements are not positioned, return body
*/
var op = box1.offsetParent;
//alert(op)
/*
* offsetLeft(Horizontal offset)
* offsetTop(Vertical offset)
* - Gets the offset of the current element relative to its positioned parent element
*/
//Horizontal offset of output box 1 relative to its positioning parent element
alert(box1.offsetTop);
};
};
</script>
</head>
<body>
<button id="btn01">Give me a hand.</button>
<div id="box3" style="width: 400px; height: 400px; background-color: skyblue;">
<div id="box2" style="width: 300px; height: 300px; background-color: honeydew; ">
<div id="box1"></div>
</div>
</div>
</body>
</html>
4. Scroll style:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: silver;
overflow: auto;
}
#box2{
width: 450px;
height: 500px;
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function(){
//Get the button and box 1
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
//Get the height of box 1
//alert(box1.clientHeight);
/*
* scrollHeight
* - You can get the height of the element's scrolling area
* scrollWidth
* - Width of element scroll area can be obtained
*/
//alert(box1.scrollWidth);
/*
* scrollTop
* - Distance of vertical scrollbar rolling
* scrollLeft
* - Rolling distance of horizontal scrollbar
*/
//alert(box1.scrollLeft);
//When scrollHeight - scrollTop = clientHeight, the vertical scrollbar scrolls to the end
//When scrollWidth - scrollLeft = clientWidth, the horizontal scrollbar scrolls to the end
//alert(box1.scrollHeight - box1.scrollTop);
};
};
</script>
</head>
<body>
<button id="btn01">Give me a hand.</button>
<br /><br />
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
Rolling Style Exercises:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info{
width: 200px;
height: 400px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* Make form items available when the scrollbar scrolls to the bottom
*/
// Binding a scrollbar scroll event for the p element
var info = document.getElementById("info");
// Get two form items
var inputs = document.getElementsByTagName("input");
/*
* onscroll
*- An event that scrolls a scroll bar, triggered when the element scrolls a scroll bar
*/
info.onscroll = function(){
// Check whether the scroll bar scrolls to the end
if(this.clientHeight == this.scrollHeight - this.scrollTop){
// When judgment is entered, the scroll bar is scrolled to the end.
// Make two form items available
// Disabled property is used to set whether form items are disabled
// Setting to true means disabled, and setting to false means available
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3> Dear Users, Welcome to Register</h3>
<p id="info">
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
Please read the following agreements carefully. If you don't agree, don't register.
</p>
<!--
If you add disabled="disabled" to a form item, you can make the form item unavailable
-->
I have read it carefully and agreed to the agreement <input type="checkbox" disabled="disabled"/>
<br /><br />
<input type="submit" value="registration" disabled="disabled"/>
</body>
</html>