지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 웹 페이지 스키닝 기능을 구현하기 위해 CSS와 결합된 Javascript_javascript 기술

웹 페이지 스키닝 기능을 구현하기 위해 CSS와 결합된 Javascript_javascript 기술

WBOY
풀어 주다： 2016-05-16 18:42:42
원래의
1641명이 탐색했습니다.
Html 코드 부분:
1. ID가 포함된 스타일 시트 링크가 있어야 합니다.

2. 버튼(백그라운드의 각 리에 onclick 이벤트를 추가하여 스킨 변경 기능 실행)

  • 회색

  • 녹색

  • 노란색

  • 파란색

  • 분홍색

  • 보라색


J 부분:
1. 스킨 변경 방법
//쿠키 설정, 버튼 선택 상태, 페이지 스킨
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName( " li");
for (i=0;i{
skins[i].className="";//버튼 상태 초기화
}
skin.setCookie(n);//현재 스타일 저장
("skin_" n).className="selected";//선택한 스킨 버튼의 스타일 설정
("cssfile").href ="css/ main" n ".css";//페이지 스타일 설정
}
2. 쿠키 액세스
//현재 스킨 n을 쿠키
스킨에 저장 .setCookie= function(n){
varexpires=new Date();
expires.setTime(expires.getTime() 24*60*60*365*1000)
var flag="Skin_Cookie ="n ;
document.cookie=flag ";expires="expires.toGMTString();
}
//사용자가 설정한 스킨 스타일 반환
skin.readCookie=function() {
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name "="); start1==-1 ){
skin=0;//설정하지 않으면 기본 스타일을 표시합니다
}
else{
var start=mycookie.indexOf("=",start1) 1 ;
var end =mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
var value= unescape( mycookie.substring(start, end));
if (values!=null)
{
skin=values;
}
return skin; 🎜>
3 .바인드 스킨 버튼 이벤트

skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li")
for (i =0;i { skins[i].onclick=function(){skin.setSkin(this.id.substring(5))}
}
}
4. 페이지 로드 후 스킨 스타일을 설정합니다.

window.onload=function(){
skin.setSkin(skin.readCookie());//Set 쿠키 스킨 스타일
skin.addEvent();//버튼 이벤트 바인딩을 읽어 반환 값에 따라
관련 라벨：
网页换肤
원천：php.cn
이전 기사：CSS 필터 배경 투명도 프롬프트_페이지 배경 다음 기사：javascript 제한 입력 스크립트 collection_javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까? 한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...
에서 2024-04-06 20:45:26
0
2
386
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
window.open() 및 data: 구성표를 사용하여 계산 문서 열기 새 브라우저 탭에서 열려는 계산된 HTML 문서를 생성하는 브라우저에서 실행되는 웹 페이지가 있습니다. 간단하고 지저분한 방법은 다음과 같이 하는 것입니다: co...
에서 2024-04-06 15:06:34
0
1
378
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿