标签: computed-style
rgba(0,0,0,0)与透明有什么区别？
在我的其他一个问题中,修复渲染问题的解决方案是使用值rgba(255, 255, 255, 255)而不是transparent.我们测试使用rgba(0, 0, 0, 0),这仍然纠正了问题,这意味着它的定义transparent会导致错误.但是,查看W3C CSS3规范(和MDN参考)可以transparent发现rgba(0, 0, 0, 0)并且 transparent应该相同:
透明
完全透明.此关键字可以视为透明黑色的简写,rgba(0,0,0,0),这是其计算值.
什么给出了什么？为什么两个看似相同的值会产生不同的结果呢？我研究了RGBA 的格式,并寻找类似的问题(无济于事).每一个问题/答案,从提到的转换transparent,以rgba(0,0,0,0)总是在词"应该"或"根据"了.(例如这里).什么是实际差异,为什么它会如此改变输出？
注意:这种情况发生在大多数(如果不是全部)Internet Explorer版本中.我们也知道它出现在某些版本的Firefox中.但是,Chrome和Safari不会显示此行为,导致我们相信存在某种补丁-webkit.
为了能够将此作为错误提交,我们需要使用最少量的代码重现问题.所以,从我的另一个问题转移,这里是使用transparentvs 的比较rgba(0,0,0,0),以及当我们使用两者时会发生什么.
透明
@keyframes spin{
0% {transform:rotateZ(0deg);}
50% {transform:rotateZ(360deg);border-radius:60%;}
100%{transform:rotateZ(720deg);}
}
.spinme{
display:inline-block;
position:relative;
left:0;
top:0;
margin:0.2rem;
width:0.8rem;
height:0.8rem;
border:0.2rem solid black;
border-radius:0%;
outline: 1px solid transparent;
transform:rotateZ(0deg);
animation: …推荐指数
解决办法
查看次数
我如何获得计算样式？
任何人都可以帮我一个脚本..或一种获得价值的方法
height : 1196px;
width: 284px;
从计算样式表(webkit).我知道IE与往常不同.我无法访问iframe(跨域) - 我只需要高度/宽度.
我需要的屏幕截图(用红色圈出).我如何访问这些属性？
资源
<iframe id="frameId" src="anotherdomain\brsstart.htm">
<html id="brshtml" xmlns="http://www.w3.org/1999/xhtml">
\--I WANT THIS ELEMENTS COMPUTED BROWSER CSS HEIGHT/WIDTH
<head>
<title>Untitled Page</title>
</head>
<body>
BLA BLA BLA STUFF
</body>
</html>
\--- $('#frameId').context.lastChild.currentStyle
*This gets the actual original style set on the other domain which is "auto"
*Now how to getComputed Style?
</iframe>
我得到的最接近的是这个
$('#frameId').context.lastChild.currentStyle
这给了我HTML元素的实际样式,即"auto",这就是iframed文档中的设置.
如何获得所有浏览器用于计算滚动条的计算样式,并检查元素值？
使用Tomalaks回答我为webkit制作了这个可爱的脚本
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")
要么
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText
结果150px
相同
$('#frameId').height();
所以我让他们在头部添加一个'brshtml'的id-也许它会帮助我更容易地选择元素.Webkit检查现在向我显示html #brshtml但我无法使用它来选择它getelementbyid
推荐指数
解决办法
查看次数
检测宽度:jQuery中的auto
我正在使用jQuery检索元素的宽度,如果我可以指示是否指定了明确的宽度(和高度),我会更喜欢它.
<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>
这将根据客户端屏幕上占用的像素数来警告div的隐式宽度.有没有办法,如果宽度丢失或设置为width: auto可以使用jQuery验证？
也就是说,代替上面的示例返回一个整数,它将返回auto或undefined.或者,是否存在isAuto功能的等价物？
推荐指数
解决办法
查看次数
在JavaScript中获取计算字体系列
这是这个问题的后续内容.
我正在研究CKEditor的一个组件,这是一个字体下拉菜单的调整版本,它总是显示当前选择的字体系列/大小值,无论它们在何处定义,使用computedStyle和配合.
正如您在其他问题中所看到的,确定字体大小现在可以跨浏览器工作.现在我无法使用该fontFamily属性.我的通用"计算样式"函数仅返回已定义的完整字体字符串,例如
Times New Roman, Georgia, Serif
为了使设置与字体系列下拉列表中的条目相匹配,我需要的是我正在检查的DOM元素的实际字体的固定字体名称.
这可以以某种方式完成,至少对于最常见的Web字体？
推荐指数
解决办法
查看次数
将javascript计算样式从一个元素设置为另一个元素
所以我试图复制适用于一个元素的所有样式(class/id/tagName/attribute等).到目前为止,我发现我可以复制元素的计算样式,只有一个问题... couldend将它应用于其他元素; /
或diffrend复制所有样式的方法.
(这是我得到的:/) http://jsfiddle.net/8KdJd/2/
//queriks mode + minor changes to retrive the computed style
function getCS(el)
{
if (el.currentStyle)
var y = el.currentStyle;
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(el,null);
return y;
}
function setCS(el,cs)
{
if (el.currentStyle)
{
el.currentStyle = cs;
el.style = cs;
}
else if (window.getComputedStyle)
{el.style = cs
}
}
var myLink = document.getElementById('myLink');
var anotherLink = document.getElementById('anotherLink');
var CS_myLink = getCS(myLink);
setCS(anotherLink,CS_myLink);
推荐指数
解决办法
查看次数
找出某种计算出的 CSS 样式的原因
我<div>在一个网页上有一个 633px 的计算高度属性。这未在任何级联样式表中设置，无论是否内联，也未在 javascript 中设置。我在我的代码中到处搜索，但数字 633 没有出现在任何地方。我可以通过设置style="height: 420px;"我想要的高度来解决这个问题，但 IE 似乎将其覆盖为 633px，我也会在其他浏览器中默认设置。我已经在 Google Chrome 和 Firefox/Firebug 中验证了 div 的实际内容远不及 633 像素高。有什么办法可以找出这个计算高度的原因吗？为完整起见，以下是 Google Chrome 报告的<div>.
Computed Style
background-color: white;
display: block;
float: left;
height: 633px;
margin-left: 30px;
margin-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 830px;
Inline Style Attribute
margin-left: 30px;
margin-top: 20px;
#overview
background-color: white;
float: left;
padding: 0px;
width: 830px;
#overview, #overviewempty
margin-top: 9px; (is crossed out)
div
display: block;
提前致谢。 …
推荐指数
解决办法
查看次数
如何查询整个DOM匹配某些计算样式的元素？(纯粹的js)
例如,我想找到所有已计算样式的元素position: fixed;.如何在不对CPU造成太大负担的情况下做到这一点？
是迭代每个getElementsByTagName('*')然后做循环唯一的方式？
推荐指数
解决办法
查看次数
不透明度的应用 CSS 规则与计算样式不同
我正在检查https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: …推荐指数
解决办法
查看次数
Firefox问题与currentStyle vs getComputedStyle
我试图根据它的CSS规则获取元素的宽度问题是"getComputedStyle"为没有设置CSS宽度值的元素返回像素值而不是"auto".在Opera中,"elem.currentStyle ['width']"返回"auto",但在firefox中,它必须使用"getComputedStyle",返回类似"1149px"的内容.
了解实际的CSS规则至关重要.除了getComputedStyle之外还有其他一些方法吗？Firefox MDN明确表示"getComputedStyle"不是可行的方法,但我找不到任何类似于"currentStyle"的Firefox文档.
如果你想知道,我的最终目标是找到页面上最大的静态宽度元素.如果我无法读取样式表值 - 只有渲染/计算值 - 那么我该如何实现呢？
推荐指数
解决办法
查看次数
在IE中将计算出的背景颜色作为rgb
我试图使用以下代码在IE中获取RGB背景颜色:
function getStyle(elem, name) {
// J/S Pro Techniques p136
if (elem.style[name]) {
return elem.style[name];
} else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
} else {
return null;
}
}
var $b = $("<button>");
$b.css("backgroundColor", "ButtonFace");
$("body").append($b);
alert("button bg color is: "+ getStyle($b[0],"backgroundColor"));
//alerts 'buttonface'
这不会像firefox那样返回rgb颜色值,它会返回'buttonface',这对我来说是无用的.
推荐指数
解决办法
查看次数
即使使用reset.css,也无法删除div之间的额外边距/填充
在过去的1.5小时里,我一直在尝试我所知道的一切,并且无法想出这一点.实际上,据我所知,边距和填充为 0,但是,包含div是到目前为止,莫名其妙地比包含图像宽4px和1px.我不知道它来自哪里.
很少有可能导致这种情况的因素:
- 我通过javascript将图像的最大宽度和最大高度设置为窗口的大小.
- 我正在使用table,table-cell和inline-blocks的组合来按照我需要的方式设置排版.
- 还使用100%宽度和高度的body和html
- 这是一个Tumblr主题定制(虽然从头开始)
代码方面,很难将整个批次放在这里,所以现在,我只是给出链接.
希望如果能够理解这一点,我将能够在这个问题中发布问题代码,以便将来参考.
链接:http://syndex.me
谢谢
推荐指数
解决办法
查看次数
getComputedStyle对象包含方法？
我在这里设置了一个演示:http: //jsbin.com/evifeb/
这更像是一个大声思考而不是一个正确的问题但是......
为什么浏览器会将样式规则直接插入到计算样式对象中的旁边方法和保留字？这只是难以解析..例如,您可能会在我的演示中注意到我正在过滤掉除字符串和数字之外的所有内容.这是为了清除同一范围内的函数.虽然,这不是100%准确,因为长度属性值是一个数字.为什么没有像"getAllStyles"这样的原型函数返回没有废话的样式对象？
OKAY所以我知道"getPropertyValue",但这只有在你想要一个指定的样式规则时才有用.所以我想我想说的是:A)是否有一个正确的方法来返回这样一个交叉的对象浏览器安全？和B)如果没有,除了长度需要除草之外还有其他属性(不在css规范中)吗？
非常感谢帮忙.我已经准备好拔牙了.
推荐指数
解决办法
查看次数
标签 统计
computed-style ×12
css ×8
javascript ×8
html ×3
dom ×2
firefox ×2
jquery ×2
clone ×1
colors ×1
copy ×1
cross-domain ×1
css3 ×1
methods ×1
object ×1
properties ×1
set ×1