Js setting and getting element style methods

1. Use onmouseover and onmouseout events to set the text style change when the mouse moves in and out.

2. Two ways to use external style sheets.

• 1. Use tags to connect to external files.

• 2. Use the @import method to import external style sheets.

  The difference between ancestors. Link belongs to the XHTML tag, and @import is completely a method provided by CSS. In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc. @import can only load CSS.
  Difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing a page where @import loads CSS, there will be no style at first, and then suddenly the style will appear, which is quite obvious when the network speed is slow.

  Differences in compatibility. Since @import was introduced in CSS2.1, older browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem.
  Differences in using dom to control styles.
  When using JavaScript to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom.
  Therefore, it is recommended to use link to introduce styles without special circumstances, and try to avoid using @import

• The difference between the two:
  Essentially, these two methods Both are for loading CSS files, but there are still subtle differences.

#3. Dynamically change the style of page elements.

• 1. Use the getElement series methods to access elements.

• 2. Change style attributes:

  （1）style属性
  （2）className属性
  HTML元素.style.样式属性＝"值"
  document.getElementById("titles").style.color="#ff0000";

4. Use functions to change menu effects

• Set the initial state of each li tag

• Set two styles over and out, indicating the effect of moving the mouse to the menu and moving out of the menu

  var len=document.getElementsByTagName("li");
      for(var i=0;i<len.length;i++){
          len[i].onmouseover=function(){
              this.className="over";
          }
          len[i].onmouseout=function(){
              this.className="out";
          }       
  }

5. Application of JavaScript access style.

• Methods to get styles:

   document.getElementById(elementId).样式属性值
   var pObj=document.getElementById("test");
   var objTop=pObj.style.top;

• Methods to get internal (embedded) and external styles:

  currentStyle    //IE
  getComputedStyle()
  //其他浏览器
  var pObj=document.getElementById("test");
  
  var objTop= pObj.currentStyle.top;
  
  var objTop =document.defaultView.getComputedStyle(pObj,null).top;

• Get the scrolling distance of the scroll bar:

  When the page is loaded, get the specific position of the layer where the picture is located, that is, the left and top positions of the page.

  When getting the initial position of the page, you need to Determine the type of the current browser

  When the scroll bar scrolls, get the distance between the scroll bar and the top and left side of the page (to determine the type of the current browser), and change the position of the layer from the top and left side at the same time.

  if (document.documentElement && document.documentElement.scrollTop) {//Firefox\IE浏览器
  
  adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
  
  adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
  } else if (document.body) {// Safari、Chrome浏览器
      adverObject.style.top=adverTop+parseInt(document.body.scrollTop)+"px";
  adverObject.style.left=adverLeft+parseInt(document.body.scrollLeft)+"px";
  }

• scrollTop Set or get the distance between the top of the object and the top of the visible content in the window

• scrollLeft Set Or get the distance between the left edge of the object and the leftmost end of the currently visible content in the window

• clientWidth The width of the visible content in the browser, excluding scroll bars and other edges, will change with the window The display size changes

• clientHeight The height of the area where the content can be seen in the browser

• Get the distance the scroll bar scrolls in the window:

  document.documentElement.scrollTop;
  document.documentElement.scrollLeft;

• Implementation ideas:
  Put the picture in a layer and use CSS style settings The initial position of the layer

#6. Create an advertising image that scrolls with the mouse.

function move(){        
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
} 
window.onload=inix;
window.onscroll=move;

The above is the detailed content of Js setting and getting element style methods. For more information, please follow other related articles on the PHP Chinese website!