我正在寻找一种方法来从样式标签上设置样式的元素中检索样式.
<style>
#box {width: 100px;}
</style>
在身体里
<div id="box"></div>
我正在寻找没有使用库的直接javascript.
我尝试了以下方法,但继续收到空白:
alert (document.getElementById("box").style.width);
alert (document.getElementById("box").style.getPropertyValue("width"));
我注意到,如果我使用javascript设置样式,但我无法使用上述样式,但无法使用样式标记.
我有一个如下所示的 CSS 关键帧，我的问题是我想将它设置为 JavaScript（放入已经有一些函数的 div），以便我可以将“元素”值返回给我的函数
.cylon-eye {
background-color: yellow;
background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
color: none;
height: 100%;
width: 20%;
animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}我尝试按照建议进行如下转换，我应该调用的返回值是var cylon-eye = document.getElementById("cylon-eye");？
<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else …你能告诉我为什么我们只需要使用这个getPropertyValue方法就可以使用这个方法getComputedStyle吗？
例如,据我所知,这将起作用:
var s = getComputedStyle(element, null).opacity;
这相当于以下内容:
var s = getComputedStyle(element, null).getPropertyValue('opacity');
我们可以getComputedStyle不用getPropertyValue吗？
我的代码是这样的:
#image_1 {
position: absolute;
top: 3vw;
}
我的尝试:http: //jsfiddle.net/z8k6t3fb/1/
我想要'3vw'
可能吗 ？
我有一个带有内联样式的段落，如下所示：
<p style="font-family:georgia,garamond,serif;">
我的问题是，有没有办法找出我的页面正在使用哪种字体以及选择过程是什么？
在jQuery(或JavaScript)中为DOM中的元素获取样式属性"position"的正确标记是什么？
例:
<div id="Parent">
Parent Element
<ul class="child">
<li>
<p>inner child elements</p>
</li>
</ul>
</div>
#Parent {
position: relative;
}
.child {
position: absolute;
}
$(function() {
// What to type here to get "style attribute position" of say #Parent?
})
在我的html文件中,我有以下标记:
<div class="long_box">
<div class="image1"> <img src="images/image1.png"> </div>
<div class="image2"> <img src="images/image2.png"> </div>
<div class="image3"> <img src="images/image3.png"> </div>
</div>
在css文件中,我应用了以下样式规则:
.long_box {
width: 3300px;
height: 768px;
position: absolute;
left: 10px;
top: 0;
}
在javascript文件中,我创建了一个变量:
var longbox = document.getElementsByClassName("long_box")[0];
现在,当我尝试回忆的初始值left的long_box是longbox.style.left,我得到一个空字符串"".但是在我left用javascript 更改值之后,例如as longbox.style.left = 100 + 'px,然后回想起它的值,然后我进入100px控制台.所以,
如何在javascript中获取样式属性的初始值？
我正在尝试编写一些基本的 javascript 代码，它只检查元素是块还是无（显示：块或显示：无）。这是我第一次遇到这个问题，因为它在我的其他网站上完美运行。这是我的代码：
function loading(){
var loader = document.getElementById("loader");
if (loader.style.display == "block"){
var child = document.getElementById("loader-ul").childNodes;
alert(child);
}
else{
alert(loader.style.display);
}
}
css（这是必要的）：
#loader{
display: block;
position: fixed;
height: 100%;
width: 100%;
background-color: white;
z-index: 9999;
}
html（这是必要的）：
<!DOCTYPE>
<html>
<header>
<title>myweb</title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body onclick="loading()">
<div id="loader">
<div class="center">
<ul id="loader-ul">
<li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
<li></li>
</ul>
</div>
</div>
</body> …当我style在JavaScript上使用属性存在元素时,它返回给我一个空字符串
alert(element.style.width);
JavaScript返回一个空的警告框我尝试使用许多预先声明的css属性,但输出相同
var images = document.querySelectorAll(".slider_image");
document.getElementById("next").onclick = function() {
for (var i = 0; i < images.length; i++) {
alert(images[i].style.width);
}
};
这是html
<div id="first-part">
<div id="slider">
<img src="img/1.jpg" class="slider_image" id="1"/>
<img src="img/2.jpg" class="slider_image" id="2"/>
<img src="img/3.jpg" class="slider_image" id="3"/>
<img src="img/next.png" id="next-img"/>
</div>
<span id="next">Next</span> <span id="before">Before</span>
</div>
这是我的css:
.slider_image{
width:100%;
position:relative;
right:0px;
}
什么可能导致这个？
我正在使用 createreactapp 创建一个反应应用程序。我有这个 if 语句，用于检查 id 为 step1 的 div 的 css display 属性，如下所示：
const step1 = document.getElementById("step-1")
if (step1.style.display === 'block') {
console.log("true")
} else {
console.log('false')
}
div的CSS样式如下：
.step-1 {
display: block;
}
但是，当我检查控制台时，if 语句返回或 console.logs 'false' 当它应该是 'true' 时。
我以这种方式简化我的实际问题的原因是因为我试图根据检查 CSS 显示属性值的 if 语句的结果来潜在地隐藏 div。但是，它不起作用。不知道发生了什么。
至于 html，它是一个包含一些内容的简单 div：
<div className="step-1" id="step-1">
Some content ....
</div>