我在网页上动态插入一些html(在我检测到用户的事件后).这个html需要一些CSS样式,我想知道什么是最干净的方法,使用jQuery.我不是网站开发人员,因此我无法将这些规则添加到原始css中.
假设我已经插入了一些没有样式的html,包括一个formElement类.我可以在我的文档中写一个新<style>块,例如:
my_html = '<style type="text/css">';
my_html += ' .formElement {';
my_html += ' display: block;';
my_html += ' width: 240px;';
my_html += ' position: relative;';
my_html += ' padding: 4px 0;';
my_html += ' }';
my_html += '</style>';
my_html = $(my_html);
$('body').prepend(my_html);
或者,我可以使用该css方法:
$('.formElement').css({
'display': 'block',
'width': '240px',
'position': 'relative',
'padding': '4px 0'
});
哪种解决方案最好/最干净？
编辑:
由于我不能直接在CSS中添加规则,我将坚持使用cssjQuery 的方法.其他一些相关问题也提供了解决方案:
我不能真正使用jQuery插件,但如果可以,我肯定会使用jQuery.Rule
谢谢大家的宝贵帮助.
我一直在研究一些不同的东西，我想使用 JavaScript 来全局调整样式。我想通过更改决定元素样式的 CSS 规则来做到这一点（类似于通过 Webkit 中的检查器执行此操作），但是在访问https://developer.mozilla.org/en/DOM/CSSStyleRule之后，我现在不知道这是否可能：
style返回
CSSStyleDeclaration规则的对象。只读。
那么，有没有办法在 JavaScript 中更改更高级别的样式呢？
我必须按名称访问CSS类，并且下面的代码有效。但是，如果我尝试hui["myclass"]或hui[".myclass"]代替hui[0]它找不到它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.myclass {
color: #00aa00;
}
</style>
<script type="text/javascript">
function change_class() {
var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
hui[0].style["color"]="#ff0000"
}
</script>
</head>
<body>
<div class="myclass" onclick="change_class()">Some Text</div>
</body>
</html>
编辑：我需要能够访问我在第一行中描述的内容，我不想访问页面上的各个元素，而是直接通过类名访问样式表。
所以你们都说我不能仅通过索引按类名访问样式表吗？