Button 1 div" >Button 2 Button 3-6ren">
gpt4 book ai didi

javascript - 单击页面上的按钮时,如何将 css 与原生 js 一起应用

转载 作者:行者123 更新时间:2023-11-27 23:19:35 25 4
gpt4 key购买 nike

我想在单击页面上的按钮时应用样式。该按钮具有数据选择器属性。此属性是我要应用 css 的选择器。

HTML 示例:

<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>

结果:错误[i] 未定义

我正在使用 js native 因为我不能使用 jQuery

PS:抱歉我的英语不好

最佳答案

两个错误。首先,您得到的是选择器字符串,但实际上并不是它所代表的 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);
}

jsfiddle:https://jsfiddle.net/h5eqg4tp/

关于javascript - 单击页面上的按钮时,如何将 css 与原生 js 一起应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41745448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com