Javascript 当在页面上单击按钮时,如何使用本机js应用css
我想在单击页面上的按钮时应用样式。该按钮具有数据选择器属性。这个属性是我想要应用css的选择器 HTML示例:Javascript 当在页面上单击按钮时,如何使用本机js应用css,javascript,html,css,Javascript,Html,Css,我想在单击页面上的按钮时应用样式。该按钮具有数据选择器属性。这个属性是我想要应用css的选择器 HTML示例: <ul> <li><button class="button" data-selector="#skip > p > a">Button 1</button></li> <li><button class="button" data-selector="#menu > div" >Bu
<ul>
<li><button class="button" data-selector="#skip > p > a">Button 1</button></li>
<li><button class="button" data-selector="#menu > div" >Button 2</button></li>
<li><button class="button" data-selector="#social">Button 3</button></li>
</ul>
<div id=#menu>
<div id="skip">
<p><a href="/pages">Hello</a></p>
</div>
<div id=social>
<p>Example 1</p>
<p>Example 2</p>
</div>
</div>
<script type="text/javascript">
var error = document.querySelectorAll(".button");
for (var i=0;i<error.length;i++){
error[i].addEventListener("click", function() {
var selector = error[i].getAttribute('data-selector');
selector.style.border = '2px solid red';
}, false);
}
</script>
- 按钮1
- 按钮2
- 按钮3
例1
例2
var error=document.queryselectoral(“.button”);
对于(var i=0;i有两个错误。首先,您得到的是选择器字符串,但实际上从未得到它所表示的DOM元素。其次,您需要在函数上下文中使用this
。工作代码:
var error = document.querySelectorAll(".button");
for (var i=0;i<error.length;i++){
error[i].addEventListener("click", function() {
var selector = this.getAttribute('data-selector');
document.querySelectorAll(selector)[0].style.border = '2px solid red';
}, false);
}
var error=document.querySelectorAll(“.button”);
对于(var i=0;i请共享您的html以及您的主要错误,看起来您正在尝试将样式应用于选择器变量,该变量只是数据属性中的文本,而不是dom元素console.log(错误)返回什么?返回:NodeList[按钮,按钮,按钮]