이것은 (ref) 원하는 작업을 수행하는 jQuery 버전이지만 자바 스크립트에서 어떻게 수행 할 수 있습니까?
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
감사합니다.
어쩌면이 당신을 도울 수 ...
(function() {
var e = document.createElement('link');
e.href = document.location.protocol + '//example.com/file.css';
e.type = 'text/css';
e.rel = 'stylesheet';
e.media = 'screen';
document.getElementsByTagName('head')[0].appendChild(e);
}());
편집, jQuery를
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
document.addEventListener('DOMContentLoaded',function(){
if(readCookie('css')){
var e = document.getElementById('test-css'); // <link href="..." id="test-css"/>
e.href = readCookie('css');
}
var element = document.getElementById('change-css'); // <a herf="#" id="change-css" rel="file.css">Click Here</a>
element.addEventListener('click', function (event) {
var e = document.getElementById('test-css');
e.href = this.rel;
if(readCookie('css')){
eraseCookie('css');
}
createCookie('css',this.rel,365);
event.preventDefault();
}, false);
})
읽기없이 전체 자바 스크립트 : http://www.quirksmode.org/js/cookies.html
그리고 : http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
먼저 예제 html 레이아웃을 만들 수 있습니다.
<html> <!--#include javascript.js styles.css-->
<body>
<span>sometext</span>
<p>somemoretext</p>
</body>
</html>
다음으로 예제 CSS 레이아웃을 만들 수 있습니다.
span {
color: red;
}
p {
color: blue;
}
body {
background: black;
}
이제 자바 스크립트입니다. 우리가하기 전에, 쿠키는 CSS 정보를 저장할 수 없습니다. 쿠키 이름을 사용하여로드 할 스타일의 유형을 결정합니다. 위의 quirksmode 리소스를 사용하면 쉽게 쿠키를 사용할 수 있습니다.
if(readCookie("newStyle")) {
// do something
} else {
// do something else
}
이 경우 스타일을 변경하고 싶습니다. 두 가지 방법, 즉 document.element.style.property또는appendChild을 다른 CSS 시트의 href와 함께 사용할 수 있습니다. 이 예에서는 document.element.style.property을 사용합니다. 예 라이브
if(readCookie("newStyle")) {
eraseCookie("newStyle")
document.getElementsByTagName("span")[0].style.color = "purple"
document.getElementsByTagName("p")[0].style.color = "pink"
} else {
createCookie("newStyle",0000,60)
}
: http://jsfiddle.net/5HGsH/3/
는 다른 색깔의 단어를 보려면 페이지를 여러 번 새로 고칩니다.
+1 여기에 좋은 정보가 있지만 내 질문과 관련이 없습니다. ** CSS 파일 ** (href 위치) 요소의 내부 스타일을 변경하고 싶습니다. 감사. – Natasha
자바 스크립트를 사용하여 서버/클라이언트 측에서 CSS 파일을 변경할 수 없습니다. 다른 CSS 파일을로드하거나 DOM의 기존 CSS를 편집해야합니다. 서버 측 스크립팅이 필요한 경우 PHP를 살펴보십시오. – railgun
내 게시물의 jQuery 버전은 내가 원하는 것을 정확히 말합니다. 엘리먼트 클릭시 HTML베이스에서 외부 CSS 파일의 href 위치를 변경하고 싶습니다. – Natasha
jQuery **는 ** 자바 스크립트입니다. 쿠키는 [document.cookie] (https://developer.mozilla.org/en-US/docs/DOM/document.cookie)를 통해 액세스합니다. – Pointy
감사합니다. 나는 jQuery를로드하고 싶지 않다. 그렇다면 CSS 부분은 어떻습니까? – Natasha
@Pointy HTTP 전용 쿠키가 아니라면 :) – PeeHaa