JavaScript some functions about CSS operations

Source: Internet
Author: User

Get CSS styles from style sheets
OBJ represents a Dom object, and name represents a CSS property such as width, such as function GetStyle (obj,name) {if (Obj.currentstyle) {return obj.currentstyle[name];} Else{return getComputedStyle (Obj,false) [name];}}
Using Csstext to set the properties of elements in bulk

obj.style.csstext= "width:150px;height:500px;"

Like innerHTML, Csstext is fast and all browsers support it. In addition, when working with styles in bulk, the csstext only needs to be reflow once, improving page rendering performance.

But Csstext also has a flaw that overrides the previous style.

But Csstext also has a flaw that overrides the previous style. Such as

<div style= "color:red;" >TEST</div>
Div.style.cssText = "width:200px;";

At this point, although the width is applied, but the previous color is overwritten lost. So when using csstext, you should use overlay to preserve the original style.

function SetStyle (el, strcss) {var sty = El.style;sty.csstext = Sty.csstext + strcss;}

Using this method is not a problem in Ie9/firefox/safari/chrome/opera, but because the Csstext return value in IE6/7/8 is missing, you will be disappointed.

Therefore, the IE6/7/8 also need to be processed separately, if the Csstext return value is not ";" Then fill in

function SetStyle (el, strcss) {function endsWith (str, suffix) {var L = Str.length-suffix.length;return L >= 0 &&am P Str.indexof (suffix, l) = = l;} var sty = El.style,csstext = Sty.csstext;if (!endswith (csstext, '; ')) {csstext + = '; ';} Sty.csstext = Csstext + strcss;}
Get elements by class
Oparent indicates that the parent element  Sclass represents the class name of the child element
function Getbyclass (oparent, Sclass) { var aele=oparent.getelementsbytagname (' * '); var aresult=[]; for (Var i=0;i<aele.length;i++) { if (aele[i].classname==sclass) { aresult.push (aele[i]); } } return aresult;}

JavaScript some functions about CSS operations

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.