Js 요소 스타일 메소드 설정 및 가져오기-JS 튜토리얼-php.cn

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

一个新手

풀어 주다： 2017-09-14 10:05:58

원래의

1882명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!