从使用类的元素中获取（和设置）样式值 [英] Getting (and setting) a style value from a element that use a class
问题描述
请原谅这个问题的简单。我有以下代码
，它试图确定某些文本的颜色并设置其他文本
以匹配该颜色。它在Firefox中工作正常，但在IE中没有任何作用。
我会很乐意提供任何帮助。另外，如果我在Opera或Safari上遇到问题
代码，我会感激任何指示 - 我没有用于测试Safari的
Mac 。
非常感谢，
Michael
// setStyleByClass：给定元素类型和一个类选择器，
//样式属性和值，应用样式。
// args：
// t - 类型用于检查的标签（例如，TD）
// c - 班级名称
// p - CSS属性
// v - 值
var ie =（document.all）？ true：false;
var c_style =" foo";
function setStyleByClass（t，c，p）{
// alert（ Hello world）;
var elements;
if（t ==''*''）{
//'' *''不支持IE / Win 5.5及以下
elements =（ie）？ document.all：document.getElementsByTagName（''*''）;
} else {
elements = document.getElementsByTagName（t）;
}
for（var i = 0; i< elements.length; i ++）{
var node = elements.item（i）;
for（var j = 0; j< node.attributes.length; j ++）{
if（node.attributes.item（j）.nodeName =='' class''）{
if（node.attributes.item（j）.nodeValue == c）{
// alert（" type is：" + t +" \ n" +" class name：" + c +" \ n" +" CSS
property：" + p +" \ n" +节点样式：" + node.style）;
TD = eval（''node''）;
// alert（" ;我们拥有的是：" + TD）;
//这似乎是IE中的问题
//基于MOZILLA的浏览器
if（document.defaultView&& document.defaultView.getComputedStyle）{
c_style = document.default View.getComputedStyle（TD，
''''）。getPropertyValue（" color"）;
// alert（" text color is：" + c_style）;
// alert（''DOM方式：''+ c_style）;
}
else if（document.uniqueID && c_style.currentStyle）{
// IS INTERNET EXPLORER //
alert（''IE方式：''）;
}
eval（''node.style。''+ p +" =''" + c_style +"''"）;
setStyleByTag（" font"，" color"，c_style，1）
}
}
}
}
}
Michael Bierman写道：请原谅这个问题的简单。我有以下代码
，它试图确定某些文本的颜色并设置其他文本以匹配该颜色。它在Firefox中运行良好，但在IE中没有任何作用。
我会很乐意提供任何帮助。另外，如果我在Opera或Safari上遇到问题，我会感激任何指示 - 我没有用于测试Safari的Mac。
请不要使用标签发布代码：用一个或两个
空格替换每个标签，全局查找/替换应该很快就能完成。
[...] //'''''不支持IE / Win 5.5及以下
elements =（ie）？ document.all：document.getElementsByTagName（''*''）;
浏览器嗅探从来都不是一个好主意。为什么不进行功能测试，并且首先测试最广泛支持的功能？
if（document.getElementsByTagName）{
elements = document.getElementsByTagName（''*''）;
} else if（document.all）{
elements = document.all;
}
[...]
TD = eval（''node''）;
// alert（"我们拥有的是： + TD）;
//这似乎是IE中的问题b $ b
''eval'' - eeyyuww，根本不喜欢。为什么不：
alert（"我们拥有的是：" + node.nodeName）;
适用于Firefox，IE， Mozilla，Netscape，Safari ...
[...] eval（''node.style。''+ p +" =''" + c_style +" ''"）;
setStyleByTag（" font"，" color"，c_style，1）
你没有包含代码对于''setStyleByTag''，是否在
O''Reilly中？
< URL：http：//www.oreillynet.com/javascript/2001 /10/05/examples/styley_source.txt>
这个东西似乎来自Apple版权2001，所以它是非常古老的并且使用了一些令人费解的做事方法。
[...]
如果您要做的就是获取元素的颜色和然后
将它应用到另一个元素，然后下面的例子已经在Firefox和IE中测试过，并且应该可以在任何当前浏览器中运行。
如果您想玩这些东西，请看这里：
< URL：http：//www.quirksmode.org/dom/ getstyles.html>
< style type =" text / css">
.xx {color：blue;边框：1px纯金;}
< / style>
< div class =" xx" onclick =" doColour（this，''zz''）;">
点击我使zz与我的颜色相同< br>
我的颜色由类< / div>设置
< div class =" xx" style =" color：red;" onclick =" doColour（this，''zz''）;">
点击我使zz与我的颜色相同< br>
我的颜色由内联样式设置覆盖类< / div>
< div style =" color：green;" ID = QUOT; ZZ" onclick ="
alert（this.style.color）;
this.style.color ='''';
" >我是zz。点击我将我设置回默认文件< / div>
< script type =" text / javascript">
function doColour（ a，b）{
var c;
//支持getComputedStyle的浏览器（Mozilla等）
if（ window.getComputedStyle）{
c = document.defaultView.getComputedStyle（a，
''''）。getPropertyValue（''color''）;
//对于支持currentStyle（IE）的浏览器
}否则if（a.currentStyle）{
c = a.currentStyle.color; < br $>
}
//将颜色应用于元素
if（c）{
if（document .getElementById）{
document.getElementById（b）.style.color = c;
}否则if（document.all）{
document.all（b）.style.color = c;
}
}
}
< / script>
-
Rob
感谢您的回复，Rob。
空格，全局查找/替换应该很快就能完成。 <
对此抱歉。这里有关于这种情况的更多细节;也许它会对我要做的事情有所了解。我有一张表格，内容是
一个TD类，没有id。当然我可以添加一个ID - 可能
应该，但我试图学习走DOM来发现我需要的b $ b。在这种情况下，为了能够在
上设置具有指定类名的TD内的所有颜色属性。
无论如何，在TD内部，那里是一些内联样式的文本 - 丑陋的代码
我不能轻易改变，因为它来自另一个应用程序。
代码如< font color =" red">。这种内联样式覆盖了周围文本的CSS
样式。最初我使用Oriely代码的较新版本
成功地将所有内联颜色更改为
black。但是因为将涉及不同的样式表，而是我想要获得周围文本的计算值并应用
颜色来覆盖所有内联样式。 （没有跨度......
字体颜色只是设置为内联。更改颜色的触发器是TD上方的一个
按钮。所以我想它会像在Firefox中找到正确的设置方法一样简单。我已经花了一些时间来查看你提供的代码，但是我已经花了一些时间。我没有能够将它转化为我的情况。也许有一个完全可靠的方式去做我想要完成的事情吗？ />
Michael
所以我尝试使用 http://www.quirksmode.org/dom/getstyles.html 和我
没有得到结果：
< script type =" text / javascript">
函数getStyle（el，styleProp） ）
{
var x = document.getElementById（el）;
alert（" var x is：&qu ot; + x）;
if（window.getComputedStyle）{
var y = window.getComputedStyle（x，null）.getPropertyValue（s tyleProp）;
alert（我们正在使用Mozilla） +\ n +值是： + y）;
//在这里设置颜色的值。
}
else if（x.currentStyle）{
var y = eval（''x.currentStyle。''+ styleProp）;
alert（"我们正在使用IE" +" \ n" +" ;值为：" + y）;
//在此设置颜色的值。
返回y;
}
}
/ *通过JavaScript输入表单，以便没有JavaScript的浏览器
看不到按钮* /
document.write（''< form id =" myForm" name =" myForm">''）;
//这里是新的根据上下文删除颜色，而不是
hardcoding black。
document.write（''< input type =" button" value =" Hide color"
id =" colorToggle" accesskey =" 1" tabIndex =" 1" title ="删除所有正文
color" onClick = \''的getStyle（QUOT;巴尼"，"合lor"）; \''\ />''）;
document.write（''& nbsp;& nbsp;& nbsp;''）;
// document.write（''< input type =" button" value ="隐藏颜色
id =" colorToggle" ACCESSKEY = QUOT 1 QUOT;的tabIndex = QUOT 1 QUOT; title ="删除所有正文
color"的onClick = \''setStyleByTag（QUOT;字体"，"颜色"，"黑色"，1）; \''\ />''）;
// document.write（''& nbsp;& nbsp;& nbsp;''）;
document.write（''< input type =" button" id =" colorToggle2" accesskey =" 2"
tabIndex =" 2" value ="显示颜色" ; title ="重新应用正文文本颜色>
onClick = \''history.go（）\''\ />''）;
// setStyleByClass（" openMessageBody"，" color"）;
document.write（''< \ / form>''）;
< / script>
结果：在IE上，我得到了我们正在使用IE （这正是我们所期望的b $ b）和value is：buttontext。这不是。
这个脚本似乎在原来的网站上运行正常 - 所以我真的很难被b
难倒。
问候，
Michael
Please forgive the simplicy of this question. I have the following code
which attempts to determine the color of some text and set other text
to match that color. It works fine in Firefox, but does nothing in IE.
I''d be greatful for any assistance. Also, if I will have problems the
code on Opera or Safari, I''d appreciate any pointers--I don''t have a
Mac to test Safari.
THanks very much,
Michael
// setStyleByClass: given an element type and a class selector,
// style property and value, apply the style.
// args:
// t - type of tag to check for (e.g., TD)
// c - class name
// p - CSS property
// v - value
var ie = (document.all) ? true : false;
var c_style = "foo";
function setStyleByClass(t,c,p){
// alert("Hello world");
var elements;
if(t == ''*'') {
// ''*'' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName(''*'');
} else {
elements = document.getElementsByTagName(t);
}
for(var i = 0; i < elements.length; i++){
var node = elements.item(i);
for(var j = 0; j < node.attributes.length; j++) {
if(node.attributes.item(j).nodeName == ''class'') {
if(node.attributes.item(j).nodeValue == c) {
// alert("type is: " + t + "\n" + "class name: " + c + "\n" + "CSS
property: " + p + "\n" + "Node style: " + node.style);
TD = eval(''node'');
// alert("What we have is: " + TD);
// this seems to be a problem in IE
// IS MOZILLA BASED BROWSER
if(document.defaultView && document.defaultView.getComputedStyle){
c_style = document.defaultView.getComputedStyle(TD,
'''').getPropertyValue("color");
// alert("text color is: " + c_style);
// alert(''DOM way: ''+ c_style);
}
else if(document.uniqueID && c_style.currentStyle){
// IS INTERNET EXPLORER //
alert(''IE way:'' );
}
eval(''node.style.'' + p + " = ''" + c_style + "''");
setStyleByTag("font","color", c_style,1)
}
}
}
}
}
Michael Bierman wrote:Please forgive the simplicy of this question. I have the following code
which attempts to determine the color of some text and set other text
to match that color. It works fine in Firefox, but does nothing in IE.
I''d be greatful for any assistance. Also, if I will have problems the
code on Opera or Safari, I''d appreciate any pointers--I don''t have a
Mac to test Safari.
Please don''t post code with tabs: replace each tab with one or two
spaces, a global find/replace should do the trick pretty quickly.
[...] // ''*'' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName(''*'');
Browser sniffing is never a good idea. Why not feature testing, and
test for the most widely supported feature first:
if (document.getElementsByTagName) {
elements = document.getElementsByTagName(''*'');
} else if (document.all) {
elements = document.all;
}
[...]
TD = eval(''node'');
// alert("What we have is: " + TD);
// this seems to be a problem in IE
''eval'' - eeyyuww, not liked at all. Why not:
alert("What we have is: " + node.nodeName);
Works in Firefox, IE, Mozilla, Netscape, Safari...
[...] eval(''node.style.'' + p + " = ''" + c_style + "''");
setStyleByTag("font","color", c_style,1)
You didn''t include the code for ''setStyleByTag'', is it in the
O''Reilly thing?
<URL:http://www.oreillynet.com/javascript/2001/10/05/examples/styley_source.txt>
This stuff appears to have come from Apple copyright 2001, so it is
very old and uses some convoluted methods to do things.
[...]
If all you are trying to do is get the colour of an element and then
apply it to another element, then the following example has been
tested in Firefox and IE and should work in any current browser).
If you want to play with this stuff, have a look here:
<URL:http://www.quirksmode.org/dom/getstyles.html>
<style type="text/css">
.xx {color: blue; border: 1px solid gold;}
</style>
<div class="xx" onclick="doColour(this,''zz'');">
Click me to make zz the same colour as me<br>
My colour is set by a class</div>
<div class="xx" style="color: red;" onclick="doColour(this,''zz'');">
Click me to make zz the same colour as me<br>
My colour is set by an inline style over-riding a class</div>
<div style="color: green;" id="zz" onclick="
alert(this.style.color);
this.style.color = '''';
">I am zz. Click me to set me back to the document default</div>
<script type="text/javascript">
function doColour(a, b) {
var c;
// For browsers that support getComputedStyle (Mozilla et al)
if (window.getComputedStyle) {
c = document.defaultView.getComputedStyle(a,
'''').getPropertyValue(''color'');
// For browsers that support currentStyle (IE)
} else if (a.currentStyle) {
c = a.currentStyle.color;
}
// Apply color to element
if (c) {
if (document.getElementById) {
document.getElementById(b).style.color = c;
} else if (document.all) {
document.all(b).style.color = c;
}
}
}
</script>
--
Rob
Thanks for your response, Rob.
Please don''t post code with tabs: replace each tab with one or two
spaces, a global find/replace should do the trick pretty quickly. <<
Sorry about that. Here''s more detail on the situation; perhaps it will
shed some light on what I''m up to. I have a table with some content in
a TD with a class and no id. Of course I could add an ID--and probably
should, but I was trying to learn to walk the DOM to discover what I
needed. In this case, to be able to set the color attribute on
everything inside the TD with the specified class name.
Anyway, inside the TD, there is some text with inline styles--ugly code
that I can''t easily change as it comes from another application. The
code like <font color="red">. This inline style overrides the CSS
style on the surrounding text. Originally I used a newer version of
the Oriely code to successfully change all of the inline colors to
black. But because different style sheets will be involved, instead I
want to get the calculated value of the surrounding text and apply that
color to override all of the inline styles. (there are no spans...the
font color is just set inline. The trigger for changing the color is a
button above the TD in question. So I thought it would be as simple as
finding the right method of setting this as there is in Firefox. I''ve
spent some time looking at the code you provided, but I haven''t been
able to translate it into my situation. Maybe there is an entirely
easier way to do what I''m trying to accomplish?
Michael
So I tried using http://www.quirksmode.org/dom/getstyles.html and I
don''t get the result I expect. Code:
<script type="text/javascript">
function getStyle(el,styleProp)
{
var x = document.getElementById(el);
alert("var x is: " + x);
if (window.getComputedStyle) {
var y = window.getComputedStyle(x,null).getPropertyValue(s tyleProp);
alert("We''re using Mozilla" + "\n" + "value is: " + y);
// set the value of the color here.
}
else if (x.currentStyle) {
var y = eval(''x.currentStyle.'' + styleProp);
alert("We''re using IE" + "\n" + "value is: " + y);
// set the value of the color here.
return y;
}
}
/* Enter the form via JavaScript so that browsers without JavaScript
don''t ever see the buttons */
document.write(''<form id="myForm" name="myForm">'');
// Here''s the new remove color based on the context, rather than
hardcoding black.
document.write(''<input type="button" value="Hide color"
id="colorToggle" accesskey="1" tabIndex="1" title="Remove all body text
color" onClick=\''getStyle("barney","color");\''\/>'');
document.write('' '');
// document.write(''<input type="button" value="Hide color"
id="colorToggle" accesskey="1" tabIndex="1" title="Remove all body text
color" onClick=\''setStyleByTag("font","color","black",1); \''\/>'');
// document.write('' '');
document.write(''<input type="button" id="colorToggle2" accesskey="2"
tabIndex="2" value="Show color" title="Reapply body text color"
onClick=\''history.go()\'' \/>'');
// setStyleByClass("openMessageBody","color");
document.write(''<\/form>'');
</script>
Result: on IE, I get the "We''re using IE" (which is just what we
expect) and "value is: buttontext". which isn''t.
This script seems to work fine on the original site--so I''m really
stumped.
Regards,
Michael
这篇关于从使用类的元素中获取（和设置）样式值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
