>  기사  >  웹 프론트엔드  >  js는 단일 HTML page_javascript 기술에 대해 두 세트의 CSS 전환 코드를 구현합니다.

js는 단일 HTML page_javascript 기술에 대해 두 세트의 CSS 전환 코드를 구현합니다.

WBOY
WBOY원래의
2016-05-16 17:37:161296검색

오늘은 JS의 setAttribute 메소드를 사용하여 한 페이지에 두 개의 스타일 시트를 구현했을 때의 효과에 대해 연구해 보았습니다. 구체적인 방법은 다음과 같습니다.
1단계:
과 같이 스타일 시트를 연결하는 요소에 ID를 정의합니다.

코드 복사 코드는 다음과 같습니다.



제가 정의한 ID는 css입니다.
2단계: js 함수 작성, 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.



이 함수의 코드는 페이지 어디에나 배치할 수 있습니다.
3단계: 페이지의 스타일 시트를 변경하는 연결에 대한 함수 트리거 이벤트를 추가합니다. 코드는 다음과 같습니다.
코드를 복사합니다 코드는 다음과 같습니다.

1.css ;a href=”#” onClick =”change(2)”>2.css

이 효과는 IE와 FF 모두에서 테스트되었습니다. 이 방법을 사용하면 표시해야 할 스타일 시트를 시청자가 선택할 수 있습니다. 예를 들어 노인은 더 큰 글꼴이 있는 스타일 시트를 선택할 수 있습니다. 여기서 주목해야 할 두 가지 사항은 다음과 같습니다.
이 예에서 함수 이름 뒤의 이름은 링크 또는 링크일 수 없습니다. 구체적인 이유는 모르겠습니다. 어쩌면 JavaScript의 예약된 문자일 수도 있습니다.
또한 전체 페이지의 스타일을 변경하려면 스타일 시트 파일에서 본문 높이를 100%로 정의해야 합니다.

방법 2:
1단계: 2개 가져오기 CSS 파일 세트

코드 복사 코드는 다음과 같습니다.

다음과 같습니다:




3단계: html 태그에서 전환 js 함수 호출




코드 복사


코드는 다음과 같습니다.


2
3
4
5
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Json query_javascript 기술을 구현하는 JS 메소드 예제다음 기사:Json query_javascript 기술을 구현하는 JS 메소드 예제

관련 기사

더보기