我在这样的css文件中有一个样式用于下拉菜单,
nav ul li a
{
display: block;
padding: 5px 4px;
border-radius: 25px;
color: #64FFFF;
text-decoration: none;
}
我希望使用类似这样的东西来改变它
var TAG = document.getElementById("nav ul li a");
TAG.setAttribute("style", "padding: 25px 40px;");
但是它不起作用,是否可以这样做或者我是否需要另一种方法。我可以看到我有四种不同的标签可供参考但是如何使用JavaScript。我是否找到了父类并以某种方式向下工作?
答案 0 :(得分:2)
您正在使用类似jQuery的选择器,在使用ID
时需要提供getElementById
var TAG = document.getElementById("hello");
TAG.setAttribute("style", "padding: 25px 40px;");
Demo 2 (没什么好看的,只使用color
属性而不是padding
,以便效果可见)
标记看起来像
<nav>
<ul>
<li>
<a href="#" id="hello">hello</a>
</li>
</ul>
</nav>
答案 1 :(得分:2)
document.getElementById
搜索ID
document.getElementsByTagName
搜索标记名称并返回与
document.getElementsByClassName
搜索类名并返回与
现在,如果你想像jQuery一样document.querySelectorAll
就是你想要的。
在哪一回合将返回一个数组。所以你需要循环它
var a = document.querySelectorAll('nav ul li a');
for(var i=0;i<a.length;i++){
a[i].setAttribute('style','padding:25px 40px'); // a[i].style.padding="25px 40px";
}
/*
another way to loop which is partially faster
var len = a.length;
while(len--){
a[len].setAttribute('style','padding:25px 40px");
}
*/
答案 2 :(得分:0)
你不能以这种方式获取元素,你必须为每个标记赋予一个唯一的id,然后以下面的方式获取元素
var Tag=document.getElementById('uniqueId');
要获取未指定id的元素,必须按照以下方式使用jQuery
var element=jQuery(".nav ul li a");
element.css('padding','25px 40px');
答案 3 :(得分:0)
你可以使用querySelectorAll()
的css选择器来获取匹配的元素,就像你的情况一样。
var tag = document.querySelectorAll('nav ul li a');
tag[0].setAttribute("style", "padding: 250px 40px;");
答案 4 :(得分:0)
我会用另一种方法。我让浏览器为我做ccs匹配,只需在nav元素上添加一个类。
nav ul li a
{
display: block;
padding: 5px 4px;
border-radius: 25px;
color: #64FFFF;
text-decoration: none;
}
nav.alternate ul li a
{
padding: 25px 40px;
}
你的javascript(假设只有一个标签导航并且它还没有类):
document.getElementsByTagName("nav")[0].className = "alternate"