Career development, code 100 days--2018-04-11
Getting and modifying HTML elements and CSS properties through JavaScript is one of its basic functions. For CSS styles, there are usually inline styles, external styles, and embedded style points.
Such as:
Inline style:
<id= "box" style= "Width:100px;height:100px;background: #ccc" ></ Div >
External style:
<rel= "stylesheet" type= "text/css" href= " Ccss.css ">
Inline style:
<styletype= "Text/css">#div{width:100px;Height:100px;background:Red;}</style>
The acquisition of a style differs depending on how it is written:
For in-line style fetching, use Obj.style. Attribute mode
The following is a case of getting and modifying inline styles:
<!DOCTYPE HTML><HTML><Head> <title>How JavaScript gets the style</title> <Scripttype= "Text/javascript"> //CSS styles Get and modify methods, two parameters, get; three parameters when modified functioncss (obj) {alert (arguments[0]); if(Arguments.length==2) { returnarguments[0].style[arguments[1]]; }Else{arguments[0].style[arguments[1]] =arguments[2]; } } //encapsulation Get Element method function$ (ID) {returndocument.getElementById (ID);} Window.onload=function () { varBox= $('Box'); Alert (CSS (box,"width"));//Getcss (box,"width","200px");//Setting Properties } </Script></Head><Body> <DivID= "box"style= "Width:100px;height:100px;background: #ccc"></Div></Body></HTML>
A style can also be modified by using CSS function skills to get a style, as long as it is based on the acquired HTML object, obj
function css (obj) { alert (arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]];//Get Style } Else { arguments[0].style[arguments[1]] = arguments[2];//Modify Style } }For ease of use, the versatility of the function can be further optimized to increase the Obj,name,value parameter
// CSS styles Get and modify methods, two parameters, get; three parameters when modified function css (obj,name,value) { // alert (arguments[0]);//arguments[0]=obj if (arguments.length==2) { return obj.style[name]; Gets the style }else {= value; Modify Style } }Non-inline style: Obj.style. Attribute mode does not apply to non-inline styles
"Good for a few things"
Compatibility issues need to be considered when getting non-inline styles with currentstyle () and getComputedStyle (), and browser compatibility issues are generally through if. else conditional statement implementation.
Currentstyle () compatible with IE6, 7, 8
getComputedStyle () incompatible with IE6, 7, 8
Day26-javascript the practice of acquiring and modifying CSS styles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
