Question

在我的HTML中，我有一个div：

<div id="devicelayout">
    Some text here
</div>

和相应的CSS：

#devicelayout
{
    width:1078px;
}

加载页面后，如何更改CSS #devicelayout的规则？

Answer 1

如果您只想更改元素的css样式，可以直接为其指定不同的类，或者使用JQuery使用

更改元素的css属性

$("#devicelayout").css("property", "value")

或

$("#devicelayout").addClass("newClass")

或者如果您想更改css规则，请尝试修改document.styleSheets对象的样式表规则。见here

Answer 2

$(document).ready(function(){
  $('#devicelayout').css("attributeName","attributeValue");
})

您可以在此处获得有关使用css函数的更多信息：http://api.jquery.com/css/

Answer 3

试试这段代码：

$(document).ready(function(){
    $("#devicelayout").css("width","500px");
});

Answer 4

您可以使用jquery作为此解决方案...将您希望#delaylayout发生的所有css更改发生在页面加载到css文件（例如devicelayout.css）之后。然后在你的脚本标签中（当你包含jquery库之后）添加这段代码......

$(document).ready(function(){ 
   if($("#devicelayout").size()>0){ /*Check if the id "#devicelayout" exists within your DOM*/

  $("head").append($("<link rel='stylesheet' href='devicelayout.css' type='text/css' />")); /*if true, the new <link> element is appended to the <head> element */   }
});

这也可以让你在页面加载后更改一些id的css，而不仅仅是一个。希望这有助于

加载DOM后更改样式表

4 个答案: