Javascript addRule/insertRule不在本地工作
我正在构建一个javascript图像滑块,并注意到在chrome中本地拉取index.html文件时出现问题。这是我的密码Javascript addRule/insertRule不在本地工作,javascript,css,google-chrome,Javascript,Css,Google Chrome,我正在构建一个javascript图像滑块,并注意到在chrome中本地拉取index.html文件时出现问题。这是我的密码 (function(){ //slider container var slider = document.getElementById('slider'); var figure = slider.childNodes[1]; var slidyImgs = figure.getElementsByTagName('IMG'); var
(function(){ //slider container
var slider = document.getElementById('slider');
var figure = slider.childNodes[1];
var slidyImgs = figure.getElementsByTagName('IMG');
var figureWidth = slidyImgs.length * 100;
var slidyImgsWidth = 100 / slidyImgs.length;
css('#slider figure{ width: '+figureWidth+"%; }");
css('#slider figure img{ width: '+slidyImgsWidth+"%; }");
var xPos = 100;
setInterval(function(){
figure.style.marginLeft = "-" + xPos + "%";
xPos = (xPos === (figureWidth - 100)) ? 0 : xPos + 100;
},7000);
})()
function css(newrule) { //adds a new style to stylesheet
var styles = document.styleSheets[1]
try {
styles.insertRule(newrule, styles.cssRules.length);
} catch(err) {
try { styles.addRule(newrule); }catch(err){} //IE
};
};
当我在本地打开文件时,insertRule似乎没有被应用。但当我在服务器上打开它时,insertRule显示为正常。有人知道这是什么原因吗
您可以在我的服务器上查看网站/源代码:我会这样做(如果jQuery不是一个选项)
显然,您可以为第二个参数添加的不仅仅是
width
。我猜这是一个跨域的问题,但唯一确定的方法是在本地删除您的try/catch,因为现在您正在完全抑制可能发生的任何错误。我在styles.cssRules.length中遇到了一个错误。它表示无法读取null的长度。所以Chrome说的是document.styleSheets[1]返回一个空的样式表。但是为什么呢?没有足够的信息来确定。我猜JS是从不同的主机加载的,而不是页面的其他部分。。。因此浏览器不允许您访问。这里存在安全隐患,因为您可以通过检查规则来查找有关用户的信息。为什么你要走这条路,而不是直接附加样式?我这样做是为了让我的老板可以随意在图像滑块中添加和减去图像,而无需更改css标记。他的html/css技能是史前的,我想尽量减少代码在更改时被破坏的可能性……但是你可以在不注入css规则的情况下将样式附加到元素上。为什么要尝试注入CSS规则?这会有问题的。
function addStylesBySelector(sel, newStyles) {
var els = document.querySelectorAll(sel)
for (var i = 0; i < els.length; i++) {
for (var k in newStyles) {
els[i].style[k] = newStyles[k];
}
}
}
addStylesBySelector('#slider figure', {"width": figureWidth + "%"})