生成节点的样式表问题 [英] Stylesheet problem with generated nodes
问题描述
我在将样式表应用于内容时遇到了麻烦我事后已经生成了
。
这里是示例代码：
< html>
< head>
< title> CSS / DOM问题示例< / title>
< style type =" text / css">
..historylinks {
a：link {color：blue; text-decoration：none}
a：active {color：red; text-decoration：none}
a：visited {color：blue; text-decoration：none}
a：hover {color：green; text-decoration：underline}
}
< / style>
< script type =" text / javascript">
函数writeToHistory（）{
var hlist = document.getElementById（" historyList"）;
var li = document.createElement（'' li''）;
var a = document.createElement（''a''）;
a.appendChild（document.createTextNode（''Test！''）） ）;
a.setAttribute（" onClick"，" alert（\" Alert！\"）;"）;
a.setAttribute （" class"，historylinks"）;
li.appendChild（a）;
hlist.insertBefore（li，hlist.firstChild）;
}
< / script>
< / head>
< body>
< p>单击此按钮时，
历史列表顶部会显示一个新链接。
单击其中一个链接执行操作。 < / p>
< button onClick =" writeToHisto ry（）;">测试< /按钮>
< ul id =" historyList">
< li>历史结束< / li> ;
< / ul>
< / body>
< / html>
Mozilla报告称它并不理解a。声明，和
可能是它的一部分，但据我所知，它是有效的CSS。我试图用a.className和a.setAttribute分配样式;
都生成有效的HTML，但都不需要。
（之后/那个/我需要弄清楚为什么IE6不会弹出警报
框...）
我感谢任何帮助你提供。
I''m having trouble applying a stylesheet to content I''m generating
after the fact.
Here''s the sample code:
<html>
<head>
<title>CSS/DOM Problem Example</title>
<style type="text/css">
..historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
</style>
<script type="text/javascript">
function writeToHistory () {
var hlist = document.getElementById("historyList");
var li = document.createElement(''li'');
var a = document.createElement(''a'');
a.appendChild(document.createTextNode(''Test!''));
a.setAttribute("onClick", "alert(\"Alert!\");");
a.setAttribute("class", "historylinks");
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
}
</script>
</head>
<body>
<p>When you click this button, a new link appears at the top of the
history list.
Click on one of these links to perform an action.</p>
<button onClick="writeToHistory();">Test</button>
<ul id="historyList">
<li>End of History</li>
</ul>
</body>
</html>
Mozilla reports that it doesn''t understand the "a" declaration, and
that might be a part of it, but as far as I can tell it''s valid CSS. I
tried assigning the style with both a.className and a.setAttribute;
both generate valid HTML, but neither takes.
(After /that/ I need to figure out why IE6 won''t popup the Alert
box...)
I appreciate any help you offer.
推荐答案
je ** ***@gmail.com 写道：
je*****@gmail.com wrote:
< style type =" text / css">
.historylinks {
a：link {color：blue; text-decoration：none}
a：active {color：red; text-decoration：none}
a：visited {color：blue; text-decoration：none}
a：hover {color：green; text-decoration：underline}
}
<style type="text/css">
.historylinks {
a:link { color: blue; text-decoration: none }
a:active { color: red; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: green; text-decoration: underline }
}
你不能以这种方式嵌套CSS，你需要例如
.historylinks a：link {...}
.historylinks a：active {...}
.historylinks a：visited {...}
.historylinks a：hover {...}
You can''t nest CSS that way, you need e.g.
.historylinks a:link { ... }
.historylinks a:active { ... }
.historylinks a:visited { ... }
.historylinks a:hover { ... }
var a = document.createElement（''a''）;
a.appendChild（document.createTextNode（''Test！''））;
a.setAttribute（" onClick"，" alert（\" Alert！\） "）;"）;
var a = document.createElement(''a'');
a.appendChild(document.createTextNode(''Test!''));
a.setAttribute("onClick", "alert(\"Alert!\");");
在编写HTML文档脚本时不要使用setAttribute，IE的
实现与W3C DOM指定的内容大不相同
其他浏览器如Mozilla实现。使用元素属性，例如
a.onclick = function（）{alert（" Alert！"）; };
和例如
Don''t use setAttribute when scripting HTML documents, IE''s
implementation is much different from what the W3C DOM specifies and
other browsers like Mozilla implement. Use element properties e.g.
a.onclick = function () { alert("Alert!"); };
and e.g.
a.setAttribute（" class"，" historylinks"）;
a.setAttribute("class", "historylinks");
a.className =" historylinks";
在编写HTML脚本时跨用户代理工作。
-
Martin Honnen
http://javaScript.FAQTs.com/
je ***** @ gmail.com 写道：
a.setAttribute（" onClick"，" alert（\） Alert！\）;"）;
a.setAttribute（" class"，" historylinks"）;
li.appendChild（a ）;
hlist.insertBefore（li，hlist.firstChild）;
a.setAttribute("onClick", "alert(\"Alert!\");");
a.setAttribute("class", "historylinks");
li.appendChild(a);
hlist.insertBefore(li,hlist.firstChild);
< html>
< head>
< title> Demo< / title>
< meta http-equiv =" Content-Type"
content =" text / html; charset = iso-8859-1">
< script type =" text / javascript">
function init（）{
var lnk = document.links [0];
lnk.setAttribute（''onclick''，''abrakadabra''）;
window.alert（lnk .getAttribute（''onclick''））;
//显示" abrakadabra"
}
window.onload = init;
< / script>
< / head>
< body>
< h1>< ; a href =" /"> Demo< / a>< / h1>
< / body>
< / html>
有多奇怪，setAttribute / getAttribute似乎工作得很好
无处不在，包括IE ......
哦，得到它！你的意思是说：在
相关DOM树节点中设置onclick属性值并不总是等于在元素的可脚本化DOM中设置onclick事件
handler界面。
那么问题是：为什么名称中会出现这种情况呢？这是真的
，有些浏览器会解析attrubute值并更新
界面，因此他们正在制作
element.setAttribute（''onclick ''，''strValue''）;
和
element.onclick = myFunction;
等于某种程度（仅限于在某种程度上因为DOM树和
DOM接口太不同而不能完全隐藏它。
这样的便利性桥接既不是直接禁止也不是要求
当前的规格。这意味着总有UA'没有
这样的扩展。其中一个UA恰好占据当前市场份额的85％或更多：因此现在强烈建议不要使用setAttribute的行为扩展
：使用标准接口
脚本方法：
a.onclick = myFunction;
a.className =''historylinks'';
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init() {
var lnk = document.links[0];
lnk.setAttribute(''onclick'', ''abrakadabra'');
window.alert(lnk.getAttribute(''onclick''));
// displays "abrakadabra"
}
window.onload = init;
</script>
</head>
<body>
<h1><a href="/">Demo</a></h1>
</body>
</html>
How strange, setAttribute / getAttribute seem working just fine
everywhere, including IE...
Oh, got it! You meant to say: "Setting onclick attribute value in the
relevant DOM Tree node is not always equal to setting onclick event
handler in the element''s scriptable DOM Interface".
The question is then: why in the name would it be otherwise? It is true
that some browsers do parse attrubute values and do update the
interface thus they are making
element.setAttribute(''onclick'', ''strValue'');
and
element.onclick = myFunction;
equal up to some extend (only "up to some extend" because DOM Tree and
DOM Interface are too different to completely hide it).
Such convenience "bridging" is neither directly prohibited nor required
by the current specs. It means that there can be always UA''s without
such extension. One of such UA happens to take 85% or more of the
current market share: thusly it is highly recommended for now do not
use behavioral extension of setAttribute: use the standard interface
scripting methods instead:
a.onclick = myFunction;
a.className = ''historylinks'';
Martin Honnen写道：
Martin Honnen wrote:
编写HTML文档脚本时不要使用setAttribute， IE的实现与b3指定的内容大不相同，而且其他浏览器（如Mozilla实现）也是如此。使用元素属性，例如
a.onclick = function（）{alert（" Alert！"）; };
和例如
Don''t use setAttribute when scripting HTML documents, IE''s
implementation is much different from what the W3C DOM specifies and
other browsers like Mozilla implement. Use element properties e.g.
a.onclick = function () { alert("Alert!"); };
and e.g.
> a.setAttribute（" class"，" historylinks"）;
> a.setAttribute("class", "historylinks");
a.className =" historylinks";
在脚本编写HTML时跨用户代理。
a.className = "historylinks";
that works across user agents when scripting HTML.
完全没有合理的建议。 IE /正确/拒绝设置元素
被描述为只读的属性在DOM中，但确实允许由setAttribute（）设置它们的
。 Firefox /错误/接受
属性设置。
例如，
var post = document.createElement（ 输入）;
post.type =" submit";
将在Firefox下正常工作，但在IE下正确失败，而
var post = document.createElement（" input"）;
post.setAttribute（" type"，" submit"）;
无处不在。
-
John W. Kennedy
"盲人Logres的统治者
以理性美德的谬误滋养土地。
- 查尔斯威廉姆斯。 Taliessin通过Logres：Prelude
Not altogether sound advice. IE /correctly/ refuses to set element
properties that are described as "read-only" in the DOM, but does allow
them to be set by setAttribute(). Firefox /incorrectly/ accepts the
property setting.
E.g.,
var post = document.createElement("input");
post.type = "submit";
will incorrectly work under Firefox, but correctly fail under IE, whereas
var post = document.createElement("input");
post.setAttribute("type", "submit");
will work everywhere.
--
John W. Kennedy
"The blind rulers of Logres
Nourished the land on a fallacy of rational virtue."
-- Charles Williams. "Taliessin through Logres: Prelude"
这篇关于生成节点的样式表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
