Summary of methods for getting styles using native JavaScript, javascript Summary

Summary of methods for getting styles using native JavaScript, javascript Summary

Source: http://www.ido321.com/930.html

Ps: Get a style, not set a style. If no style value is set for the element, the default value is returned. (Forum arrangement)

 

1. element. style: only the style values written in the style attribute in the element label can be obtained, and the style attributes defined in <style> </style> and loaded through <link href?"”css.css "> cannot be obtained.

   1: var ele = document.getElementById('ele');

2: ele. style. color; // obtain the color.

 

2. window. getComputedStyle (): obtains all final CSS attribute values of the current element.

1: window. getComputedStyle ("element", "pseudo class ");

This method accepts two parameters: the element to obtain the calculated style and a pseudo element string (for example, ": before "). If the pseudo element information is not required, the second parameter can be null. You can also use document. defaultView. getComputedStyle ("element", "pseudo class ");

   1: var ele = document.getElementById('ele');

   2: var styles = window.getComputedStyle(ele,null);

3: styles. color; // obtain the color.

You can use style. length to view the number of default styles in the browser. The IE6-8 does not support this method and requires the following method. For Firefox and Safari, the color is converted to rgb format.

 

3. element. currentStyle: Private to IE. the returned value is the final CSS attribute value of the current element application (including the external link CSS file and the <style> attribute embedded in the page ).

   1: var ele = document.getElementById('ele');

   2: var styles = ele.currentStyle;

   3: styles.color;

Note: For comprehensive attributes such as border, ie returns undefined. Some other browsers return values, while others do not, but attributes such as borderLeftWidth return values.

 

4. getPropertyValue (): Get the direct attribute name of the CSS style

   1: var ele = document.getElementById('ele');

   2: window.getComputedStyle(ele,null).getPropertyValue('color');

Note: The property name does not support the camper format and the IE6-8 does not support this method, you need to use the following method

 

5. getAttribute (): similar to getPropertyValue, one difference is that the attribute name is in camping format.

   1: var test = document.getElementById('test');

   2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

Note: This method only supports IE6-8.

 

The following methods are compatible with IE, chrome, and FireFox.

   1: function getStyle(ele) {

   2:     var style = null;

   3:     

   4:     if(window.getComputedStyle) {

   5:         style = window.getComputedStyle(ele, null);

   6:     }else{

   7:         style = ele.currentStyle;

   8:     }

   9:     

  10:     return style;

  11: }

In JQuery, css () is often used to obtain style attributes. The getComputedStyle and getPropertyValue methods are applied to its underlying operations.

How to bind events to newly generated elements in native javascript

Window. onload = function () {var oBtn = document. getElementById ("btn1"); var oUl = document. getElementById ("ul1"); var aA = oUl. getElementsByTagName ("a"); oBtn. onclick = function () {var oLi = document. createElement ("li"); oLi. innerHTML = '2014 <a href = "javascript:;"> Delete </a> '; oUl. appendChild (oLi); // Add the event aA = oLi to the new. getElementsByTagName ("a"); for (var I = 0; I <aA. length; I ++) {aA [I]. onclick = function () {oUl. removeChild (this. parentNode) ;}}for (var I = 0; I <aA. length; I ++) {aA [I]. onclick = function () {oUl. removeChild (this. parentNode );}}}

Javascript native code looks very powerful !! Top

==| | Native code is not bad ~ The usage depends on the situation. Sometimes it is more convenient to use the library, and sometimes the native code is more useful.
It takes some time to use the database. It is best to start studying the code of the next database ~ It's hard to forget what it means