Js 요소 스타일 메소드 설정 및 가져오기

1. onmouseover 및 onmouseout 이벤트를 사용하여 마우스가 들어오고 나갈 때 텍스트 스타일 변경을 설정합니다.

2. 외부 스타일 시트를 사용하는 두 가지 방법.

• 1. 태그를 사용하여 외부 파일에 연결합니다.

• 2. 외부 스타일 시트를 가져오려면 @import 메서드를 사용하세요.

  조상의 차이. Link는 XHTML 태그에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다. CSS를 로드하는 것 외에도 link 태그는 RSS 정의, rel 연결 속성 정의 등과 같은 다른 많은 작업도 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다.
  로딩 순서가 다릅니다. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 로드되기 전에 완전히 다운로드될 때까지 기다립니다. 따라서 @import가 CSS를 로드하는 페이지를 탐색할 때 처음에는 스타일이 없다가 갑자기 스타일이 나타나는 경우가 있는데, 이는 네트워크 속도가 느릴 때 매우 분명합니다.

  호환성의 차이. @import는 CSS2.1에서 도입되었기 때문에 이전 브라우저에서는 이를 지원하지 않습니다. @import는 IE5 이상에서만 인식할 수 있지만 링크 태그에는 이러한 문제가 없습니다.
  DOM을 사용하여 스타일을 제어할 때의 차이점.
  JavaScript를 사용하여 스타일을 변경하기 위해 DOM을 제어하는 ​​경우 @import는 DOM에서 제어할 수 없기 때문에 링크 태그만 사용할 수 있습니다.
  그래서 특별한 상황 없이 스타일을 소개하려면 링크를 사용하는 것이 좋으며, @import

• 는 피하는 것이 좋습니다. 둘의 차이점은
  본질적으로 이 두 가지 방법은 CSS 파일을 로딩하기 위한 것이지만 아직은 미묘한 차이.

3. 페이지 요소의 스타일을 동적으로 변경합니다.

• 1. 요소에 액세스하려면 getElement 시리즈 메소드를 사용하세요.

• 2. 스타일 속성 변경:

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

4. 기능을 사용하여 메뉴 효과 변경

• 각 li 태그의 초기 상태를 설정합니다.

• 두 가지 스타일을 겹쳐서 설정합니다. 메뉴로 이동 및 메뉴 밖으로 이동

  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. JavaScript 접근 스타일 적용.

• 스타일 가져오기 방법:

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

• 내부(내장) 및 외부 스타일 가져오기 방법:

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

• 스크롤 막대 스크롤 거리 가져오기:

  페이지가 로드되면 세부 정보 가져오기 이미지가 위치한 레이어 위치, 즉 페이지의 왼쪽과 위쪽 위치

  페이지의 초기 위치를 가져올 때 현재 브라우저의 유형을 결정해야 합니다

  스크롤 막대가 스크롤되면 스크롤 막대와 페이지 상단 및 왼쪽 사이의 거리(현재 브라우저의 유형을 결정해야 함) 유형) 상단 및 왼쪽에서 레이어 위치를 변경합니다.

  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 개체의 상단과 창에 표시되는 콘텐츠의 상단 사이의 거리를 설정하거나 가져옵니다.

• scrollLeft 개체의 왼쪽 가장자리와 창의 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다. 창에 현재 표시되는 콘텐츠 거리

• clientWidth 스크롤 막대 및 기타 가장자리를 제외하고 브라우저에 표시되는 콘텐츠의 너비는 창의 표시 크기에 따라 변경됩니다.

• clientHeight 창의 표시 크기에 따라 변경됩니다. 내용은 브라우저에서 볼 수 있습니다.

• 스크롤하기 창에서 막대가 스크롤되는 거리:

  document.documentElement.scrollTop;
  document.documentElement.scrollLeft; 구현 아이디어:

  이미지 넣기; 레이어를 만들고 CSS 스타일을 사용하여 레이어의 초기 위치를 설정합니다

• 
  

  6. 마우스로 스크롤되는 광고 이미지를 만듭니다.
아아아아

위 내용은 Js 요소 스타일 메소드 설정 및 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!