![](/img/trans.png)
[英]Issue with switching between extjs versions on unloading and reloading js/css files dynamically
[英]Dynamically Switching CSS Files
当尝试使用下面的代码加载页面时,出现两条错误消息。 错误消息是:
我正在尝试创建一个链接,单击该链接将切换到另一个css文件(使用不同的字体)。
(奖金问题:链接是否有办法在两个样式表之间切换?)
我已经从另一个StackOverflow问题中解决了这个问题,但是我似乎无法使代码适合我的情况。
这里是链接:
<li><a href="#" class="changeStyle" data-style="css/style.comicsans.css" data-type="text/css" data-rel="stylesheet">JB's Fav Font</a></li>
这是页面底部的js函数:
<!-- cssswitcher js -->
<script type='text/javascript'>
window.onload = function bindEvents(){
var css=document.getElementById('style');
var col=document.querySelectorAll('a.changeStyle');
/* iterate through collection and assign listener */
for( var n in col )if( col[n].nodeType==1 ) col[n].onclick=function(e){
e.preventDefault();/* prevent jumping to top of page etc */
var el=typeof(e.target)!='undefined' ? e.target : e.srcElement;
/* assign style attributes */
css.href=el.dataset.style;
css.rel=el.dataset.rel;
css.type=el.dataset.type;
/* store reference to style selected in localstorage */
localStorage.setItem( 'style', el.dataset.style );
};
/* if there is a reference to the user's css choice in storage, assign it */
if( localStorage.getItem( 'style' )!=null ) css.href=localStorage.getItem( 'style' );
}
document.addEventListener( 'DOMContentLoaded', bindEvents, false );
</script>
首先,首先定义如下原始样式:
HTML:
<link id="style" rel="stylesheet" type="text/css" href="style.css" />
注意,我们将使用id=style
来查找元素。 那可能会解决您的第一个错误。
对于第二个,您必须决定是否使用document.addEventListener( 'DOMContentLoaded', bindEvents, false );
或window.onload
因为它们是不同的功能。 这可能会帮助您window.onload与body.onload与document.onready 。
因此,现在我们可以执行一些Javascript了:
HTML(链接):
<li><button onclick='setStyle("css/style.comicsans.css")'>JB's Fav Font</button></li>
<li><button onclick='setStyle("css/style.other.css")'>Other Font</button></li>
首先,请注意,我只在单击时使用参数来调用setStyle
函数,而且最好与<button>
,这样我们可以获得更干净的结果。
使用Javascript:
var cssStyle = document.getElementById('style');
window.onload = function(){
if(localStorage && localStorage.getItem("style"))
cssStyle.href = localStorage.getItem("style");
};
function setStyle(newStyle){
cssStyle.href = newStyle;
if(localStorage)
localStorage.setItem("style", newStyle);
};
奖励 :但是,如果您仅使用两种样式,请尝试简化,并使用简写方法来做到这一点:
HTML:
<li><button onclick='toggleStyle()'>Toggle</button></li>
<!-- cssswitcher js -->
<script type='text/javascript'>
var cssStyle = document.getElementById('style');
var listStyles = ["css/style.comicsans.css", "css/style.other.css"];
window.onload = function(){
if(localStorage && localStorage.getItem("style"))
cssStyle.href = localStorage.getItem("style");
};
function toggleStyle(){
var previousStyle = cssStyle.href;
if(previousStyle.endsWith(listStyles[0]))
newStyle = listStyles[1];
else
newStyle = listStyles[0];
cssStyle.href = newStyle;
if(localStorage)
localStorage.setItem("style", newStyle);
};
</script>
我使用JQuery在我的一个项目中做到了这一点,希望对您有所帮助:
HTML:
<ul id="projectList">
<li class="project">Lorem Lorem</li>
<li class="project viewed">Lorem Lorem</li>
<li class="project viewed selected">Lorem Lorem</li>
<li class="project viewed selected">Lorem Lorem</li>
<li class="project viewed">Lorem Lorem</li>
</ul>
带有动态CSS代码的JavaScript:
var data = {
"projectColors": {
"viewedColor": "#fffc20",
"selectedColor": "#ff7920"
}
};
var style = $(document.createElement("style")).attr("type", "text/css");
style.append("#projectList .project.viewed {color: " + data.projectColors.viewedColor + ";}");
style.append("#projectList .project.selected {color: " + data.projectColors.selectedColor + ";}");
style.appendTo("head");
JSFiddle:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.