让我们想象一下我已经声明了一些样式(直接在我的html文档或外部css文件中):
<style>
.Red { background-color: red; }
.Green { background-color: green; }
.Blue { background-color: blue; }
</style>
在我的javascript代码中,我想列出Array或任何其他形式的所有可用样式
function getAvailableStyleNames(){
return ["Red", "Green", "Blue"]; // Dummy code. the answer would go here...
}
谢谢!
我的想法是当我点击按钮时，div#x 宽度会减少 1%。这是我的代码：
document.querySelector('#a').onclick = function() {
var
lost = document.querySelector('#x').style.width,
lost = lost.slice(0, -1);
lost = Number(lost);
lost -= 1;
document.querySelector('#x').style.width = lost + '%';
}nav#control {
display: flex;
flex-basis: 50px;
align-items: center;
justify-content: center;
background: #FFF;
padding: 5px;
width: 100%
}
.knob {
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
cursor: pointer
}
#b {
position: relative;
flex-grow: 1;
background: #EFEFEF;
margin: 0 10px;
height: 30px
}
#x {
position: absolute;
background: #4C8EFA; …我想以编程方式从chrome开发人员工具中检索一组CSS类定义.实际上类似于右侧的样式选项卡中显示的内容.输入必须是类名,输出应该是其中定义的所有样式.
我知道getComputedStyle DOM方法,但是这并没有分成我需要的单独的类.
我需要制作一个基于屏幕宽度的正方形元素。为了将高度设置为与宽度相同，我尝试使用JS，但似乎有点错误。这是一个例子
var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';#square {
background-color: blue;
width: calc(20vw - 16px);
padding: 8px;
}<div id="square">Element</div>上方的蓝色“正方形”不是正方形。能解释为什么吗？而不是clientWidth，我已经尝试过scrollWidth并offsetWidth得到类似的结果。我也没有style.width给出正确的数字。
即使您在Chrome上检查了蓝色正方形，您也会得到一个高度和宽度近似但仍然非常不同的数字。