我正在编写一个jQuery插件,我需要做的是确定用户指定的元素的宽度.问题是.width()或.css('width')将始终报告精确的像素,即使开发人员已经使用CSS分配了宽度:90%.
有没有办法让jQuery输出px或%中元素的宽度,具体取决于开发人员用CSS给出的内容？
如何通过jQuery从CSS类访问属性？我有一个CSS类,如:
.highlight {
color: red;
}
我需要在对象上做一个颜色动画:
$(this).animate({
color: [color of highlight class]
}, 750);
所以我可以red改为blue(在CSS中),我的动画将按照我的CSS工作.
一种方法是在highlight类中放置一个不可见的元素,然后获取要在动画中使用的元素的颜色,但我想这是一个非常非常糟糕的做法.
有什么建议？
这是一个简单的问题示例:
<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
try{
alert(document.styleSheets[0]); // works
alert(document.styleSheets[0].cssRules); // doesn't even print undefined
}catch(e){alert(e)} // catch and alert the error
}
</script>
</head>
<body>
</body>
</html>
myStyle.css body{background-color:green;}
如果你使用脚本工作正常 <style></style>
解决方案:
1,作品文件时在线/本地主机
2.作品与其他浏览器(如IE浏览器,微软边缘,火狐)
3 铬--allow-文件访问从-文件
以下代码在带有continue的行的Firefox控制台中引发错误.
SecurityError: The operation is insecure.
if( !sheet.cssRules ) { continue; }
但是在Chrome和IE 11中没有...有人可以解释一下这个吗？(以及如何重新安排使其安全.)我认为这是一个跨域问题,但我仍然坚持如何正确地重新编写代码.
var bgColor = getStyleRuleValue('background-color', 'bg_selector');
function getStyleRuleValue(style, selector, sheet) {
var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
for (var i = 0, l = sheets.length; i < l; i++) {
var sheet = sheets[i];
if( !sheet.cssRules ) { continue; }
for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
var rule = sheet.cssRules[j];
if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== …因此,如果有一个链接到网页的css文件,例如:
<link href="style.css" rel="stylesheet" type="text/css">
我想读取某个属性,例如div有className ='layout',我想用JavaScript读取这个属性的详细信息,我该怎么做？
我已经搜索了很多但几乎没有运气,请建议.
我有几个背景图像的div.我想知道如何使用gif图像预加载那些背景图像,因为一些背景图像非常大.执行以下操作不起作用:
HTML:
<div id="glykopeels" onload="loadImage()">Glykopeels Content</div>
<div id="facials" onload="loadImage2()">Facials Content</div>
CSS:
#glykopeels{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
#facials{
background: #ebebeb url(http://lamininbeauty.co.za/images/products/preloader.gif) no-repeat top right;
background-size: contain;
}
JS:
function loadImage(){
document.getElementById('glykopeels').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/glykopeel.jpg);';
}
function loadImage2(){
document.getElementById('facials').style.background = '#ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg);';
}
我想在onload函数中为该元素定义一个不同的ID,并为该新ID定义css是另一种可能性吗？这样只更改onload函数中该元素的id？
谢谢
我正在一个网站上工作,我想到如果我把页面上的CSS规则随机化为一个笑话会有多么有趣.(不仅仅是元素的样式,而是CSS规则本身,因为网站有很多动态创建的元素.)每次加载页面时,结果都会完全不同,而且大多数都看起来很糟糕.所以我的问题有两个部分:
使用JavaScript/JQuery,您如何以编程方式获取所有CSS规则的列表？作为一种字典,规则与选择器配对.
然后,在您分解列表并将每个规则随机分配给不同的选择器之后,如何删除以前的规则并替换为您自己的规则？
注意:我的意思是,使用JavaScript/JQuery,如何在客户端随机化规则,而不仅仅是单个CSS文件.
我们如何使用 JavaScript 来获取声明的 CSS 值的值（例如使用 Chrome 的检查器检查元素时显示的值？我在网络上尝试和搜索的所有内容似乎只想给出计算值。
对于我的具体用例，我想知道 CSS 过渡结束时的宽度是多少，该宽度是在样式表中设置的，而不是内联的。当我使用 JavaScript 检查宽度时，我得到了计算出的宽度，在脚本中检索时该宽度位于转换的开始处，因此0即使在 300 毫秒内它将是声明的宽度，如320px.
我正在编写一些使用 Chrome DevTools 协议控制 Chrome 的测试代码。打开网页后，我需要从页面中获取图像。获取图像 URL 很容易，但我想从 Chrome 获取实际图像而无需重新下载它们。由于测试客户端和 Web 服务器之间的带宽有限，这将有助于测试运行得更快。它还有助于测试模拟与 Web 服务器更真实的交互。
有没有办法使用 Chrome DevTools 协议获取图像？我想我可以截取每张图像的屏幕截图，但我更喜欢获得未更改的图像。或者，有没有办法从注入浏览器的脚本中访问图像？
javascript google-chrome google-chrome-extension google-chrome-devtools
我知道我必须在这里遗漏一些东西,但我似乎无法让它发挥作用.
我使用文档head部分中的样式标记为html文档的主体指定了背景颜色,但是当我尝试通过JavaScript读取它时,我什么也得不到:
<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>
..但是,如果我将样式分配为内联,它可以工作:
<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>
我知道我遗漏了一些基本的东西,但我的思绪今天不在这个区域 - 谁能告诉我为什么我的第一个场景不起作用？
谢谢