我正在尝试根据每个DIV的类别切换网站上某些DIV元素的可见性.我正在使用基本的JavaScript代码段来切换它们.问题是该脚本仅使用getElementById,因为getElementByClassJavaScript不支持.不幸的是,我必须使用class而不是id来命名DIV,因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的.
我知道某些浏览器现在支持getElementByClass,但由于Internet Explorer不支持,我不想走那条路.
我发现脚本使用函数来按类获取元素(例如本页#8:http://www.dustindiaz.com/top-ten-javascript/),但我无法弄清楚如何集成它们与我的切换脚本.
这是HTML代码.DIV本身缺失,因为它们是在使用XML/XSLT加载页面时生成的.
主要问题:如何获取以下Toggle脚本以获取逐个元素而不是按ID获取元素？
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->
<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to …javascript class getelementbyid toggle getelementsbyclassname
我会使用document.getElementsByClassName,但IE不支持它.
所以我尝试了Jonathan Snook的解决方案:
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');
......但IE仍然说:
Object不支持此属性或方法
任何想法,更好的方法,错误修复？
我宁愿不使用涉及jQuery或其他"笨重的javascript"的任何解决方案.
我得到了它的工作!
正如@joe提到的那样,函数不是一种方法document.
所以工作代码看起来像这样:
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var tabs = getElementsByClassName(document.body,'tab'); …javascript internet-explorer class classname internet-explorer-8
使用javascript使用特定CSS类获取html文档中所有元素数组的最佳方法是什么？
现在没有像jQuery这样的javascript框架,我可以循环所有元素并自己手动检查它们.我希望有一些更优雅的东西.
我一直在研究一些不同的东西，我想使用 JavaScript 来全局调整样式。我想通过更改决定元素样式的 CSS 规则来做到这一点（类似于通过 Webkit 中的检查器执行此操作），但是在访问https://developer.mozilla.org/en/DOM/CSSStyleRule之后，我现在不知道这是否可能：
style返回
CSSStyleDeclaration规则的对象。只读。
那么，有没有办法在 JavaScript 中更改更高级别的样式呢？
脚本不起作用.当我点击"nombreDeLista"时,我想用display属性显示"tiposDeFrutas".我还添加了CSS文档.
.tiposDeFrutas {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Pruebas HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
<script>
document.onload = function() {
document.getElementById("nombreDeLista").onclick = function() {
document.getElementsByClassName("tiposDeFrutas").style.display = "block";
};
};
</script>
</head>
<body>
<div id="nombreDeLista">Frutas</div>
<div class="tiposDeFrutas">Pera</div>
<div class="tiposDeFrutas">Limón</div>
</body>
</html>