在JavaScript中设置CSS属性?

2020/10/27 23:42 · javascript ·  · 0评论

我创建了以下内容...

var menu = document.createElement('select');

我现在将如何设置CSS属性,例如width: 100px

用途element.style

var element = document.createElement('select');
element.style.width = "100px";

只需设置style

var menu = document.createElement("select");
menu.style.width = "100px";

或者,如果您愿意,可以使用jQuery

$(menu).css("width", "100px");

对于大多数样式,请执行以下操作:

var obj = document.createElement('select');
obj.style.width= "100px";

对于名称中带有连字符的样式,请改用以下方法:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

使用原始JavaScript实际上很简单:

menu.style.width = "100px";

所有答案都可以正确告诉您如何执行您的要求,但我建议您使用JavaScript在元素上设置类并使用CSS设置其样式。这样,您就可以在行为和样式之间保持正确的分隔。

想象一下,如果您有一位设计师来重新设计网站的样式……他们应该可以完全在CSS中工作,而无需使用JavaScript。

在原型中,我会做:

$(newElement).addClassName('blah')

只适合想要在2018年做同样事情的人

您可以为元素分配CSS自定义属性(通过CSS或JS)并进行更改:

通过CSS进行赋值:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

通过JS分配

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

通过JS获取属性值

ELEMENT.style.getPropertyValue('--element-width');

这里有用的链接:

调试时,我希望能够在一行中添加一堆CSS属性:

menu.style.cssText = 'width: 100px';

习惯了这种样式后,您可以在一行中添加一堆CSS,如下所示:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

如果要添加全局属性,则可以使用:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>
<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

如果其中没有连字符,那么这对于大多数CSS属性都适用。

var element = document.createElement('select');
element.style.width = "100px";

对于其中带有连字符的属性max-width,您应将转换sausage-casecamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

重要的是要了解,下面的代码不会更改样式表,而是会更改DOM:

document.getElementById("p2").style.color = "blue";

DOM存储样式表元素属性的计算值,并且当您使用Javascript动态更改元素样式时,您正在更改DOM。注意和理解这一点很重要,因为编写代码的方式会影响动态。如果您尝试获取未直接写入元素本身的值,就像这样...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

...您将返回一个未定义的值,该值将存储在代码示例的'propertyValue'变量中。如果您要获取和设置在CSS样式表中编写的属性,并且希望获得一个SINGLE FUNCTION并在这种情况下设置样式属性值(这是一种很常见的情况),那么您必须使用JQuery。

$(selector).css(property,value)

唯一的缺点是您必须了解JQuery,但是老实说,这是每个Javascript开发人员都应该学习JQuery的许多很好的理由之一。如果要获取从纯JavaScript中的样式表计算得出的CSS属性,则需要使用。

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

该方法的缺点是getComputedValue方法只能获取,而不会设置。
Mozilla对计算值的理解关于我在这里所解决的问题,此链接更加深入。希望这可以帮助到别人!

本文地址:http://javascript.askforanswer.com/zaijavascriptzhongshezhicssshuxing.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!