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

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();//버튼 이벤트 바인딩을 읽어 반환 값에 따라