동적으로 CSS 파일 호출 - jquery_jquery 적용

번역, 원문입니다: http://15daysofjquery.com/style-sheet-switcheroo/12/

다양한 애플리케이션, 특히 표준을 사용하는 웹사이트에 적용할 수 있습니다. 간단한 클릭만으로 웹 사이트의 스킨을 즉시 변경할 수 있습니다. 물론 여기에서는 코드가 간단하고 장점이 있습니다. 읽기 가능
코드를 먼저 넣으세요

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

$ (문서).ready(function()
{
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c)
}); styleName)
{
$(' link[@rel*=style]').each(function(i)
{
this.disabled = true;
if (this.getAttribute ('title') == styleName) this.disabled = false;
      }) 🎜>



코드 복사

다음은 다음과 같습니다.
$('.styleswitch').click

이 문장은 클래스 이름이 styleswitch인 모든 개체에 대한 클릭 이벤트를 정의합니다. jquery에서는 "#"을 사용하여 ID를 나타냅니다. 예를 들어, $("#my_id")는 ID가 my_id이고 클래스 이름이 "."인 개체를 찾을 수 있으며, tagName 위치 지정은 $("p")와 같은 수정자를 추가하지 않습니다. 이는 모든 p 개체를 찾는다는 의미입니다. readCookie 및 createCookie는 여기에 제공되지 않은 두 가지 사용자 정의 함수입니다.

코드 복사

코드


$('link[@rel*=style]').each(function(i)

이 문장은 링크 태그를 찾는다는 의미입니다. , rel 속성이 있고 rel 속성에는 스타일이 포함되어야 하며 각 객체에 대한 함수를 공식화해야 합니다

코드 복사

코드는 다음과 같습니다.

this.disabled = true;

이 문장은 현재 개체를 무효화한다는 뜻입니다

코드 복사

코드는 다음과 같습니다.


function switchStylestyle(styleName)
{

$('link[@rel*=style][@title]').each(function(i) { this.disabled = true; if (this.getAttribute('title') == styleName) this.disabled = false; }); createCookie('style', styleName, 365)

이 함수의 기능은 현재 스타일을 선택하는 것입니다.
$('link[@rel*=style][@title]').each(function(i)
이전 지식을 바탕으로 이 문장 이해하기 어렵지 않아야 합니다. 즉, 모든 태그는 link로 명명되고, rel 속성을 포함하고, rel 속성은 스타일을 포함해야 하며, title 속성을 가진 객체도 있어야 하며 각각 해당 기능을 실행합니다.

메인페이지 내용을 살펴보겠습니다

코드복사 코드는

< ;link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />

여기서 rel="alternate stylesheet"를 사용하면 현재 CSS가 현재 문서에 적용했지만 백업만

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

styles1

;styles2

스타일을 변경하는 코드입니다. 부분을 ​​클릭한 후 위치 지정에 편리한 rel 속성과 클래스 속성이 있음을 확인했습니다. 예:
http://www.healdream.com/upLoad/html/jquery/styleswitch/
다운로드:
http://www.51files.com/?YTXG82NKA8FA6TIKE4M0