如何定义一组可以使用JavaScript添加为类的CSS规则？
[英]How can I define a set of CSS rules that can be added as class using JavaScript?
问题描述
I am trying to use the addClass function to add class via JavaScript, but I just can't add the class. 
我试图使用addClass函数通过JavaScript添加类，但我只是无法添加类。 Is there a special way to define a class that will be added to an element onclick ? 有没有一种特殊的方法来定义一个将被添加到元素onclick ？ This is what I have tried: 这是我尝试过的：
var input = document.querySelector('.sb-input'); var image = document.querySelector('.sb-label img'); image.addEventListener('click', function() { if (classie.has(input, 'open')) classie.remove(input, 'open') else classie.add(input, 'open'); console.log('I am back') });
.search-bar { position: absolute; top: 30px; right: 60px; width: 300px; height: 40px; overflow: hidden; } .sb-label { position: absolute; right: 0px; display: block; width: 50px; height: 40px; background-color: #32ab32; text-align: center; z-index: 10; cursor: pointer; } .sb-label img { display: block; z-index: 30; cursor: pointer; } .sb-input { position: absolute; right: 0px; width: 50px; height: 40px; border: none; backface-visibility: hidden; transition: left 0.7s; z-index: 5; } .sb-input .open { z-index: 90; } .sb-input .open { width: 100%; transition: left 0.7s; }
<div class="search-bar"> <form> <label class="sb-label" id="sb-label"> <img src="search-icon01.png" width="35px" height="35px"> </label> <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word"> </form> </div>
I added a callback and I got a message on my console, indicating that the function is ok, and when I did this, it works: 我添加了一个回调，我在控制台上收到一条消息，表明该功能正常，当我这样做时，它有效：
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('I did it')
});
Apparently the problem is with my stylesheet. 显然问题出在我的样式表上。 Could somebody please help me to correct this anomaly? 有人可以帮我纠正这个异常吗？
1 个解决方案
解决方案1
3 已采纳 2016-11-19 11:55:28
I'm curious where did you get classie from? 我很好奇你从哪里得到了classie ？ Use classList , I think classie is too classy for us lowly developers:P 使用classList ，我认为classie对于我们低级的开发人员来说过于优雅：P
SNIPPET SNIPPET
<!doctype html> <html> <head> <meta charset='utf-8'> <style> .search-bar { position: absolute; top: 30px; right: 60px; width: 300px; height: 40px; overflow: hidden; } .sb-label { position: absolute; right: 0px; display: block; width: 50px; height: 40px; background-color: #32ab32; text-align: center; z-index: 10; cursor: pointer; } .sb-label img { display: block; z-index: 30; cursor: pointer; } .sb-input { position: absolute; right: 0px; width: 50px; height: 40px; border: none; backface-visibility: hidden; transition: left 0.7s; z-index: 5; } .sb-input .open { z-index: 90; } .sb-input .open { width: 100%; transition: left 0.7s; } </style> </head> <body> <div class="search-bar"> <form> <label class="sb-label" id="sb-label"> <img src="search-icon01.png" width="35px" height="35px"> </label> <input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word"> </form> </div> <script> var input = document.querySelector('.sb-input'); var image = document.querySelector('.sb-label img'); image.addEventListener('click', function() { if (input.classList.contains('open')) { input.classList.remove('open'); } else { input.classList.add('open'); console.log('i am back') } }); var input = document.querySelector('.sb-input'); var image = document.querySelector('.sb-label img'); image.addEventListener('click', function() { input.style.zIndex = 90; input.style.width = '100%'; console.log('did i do it') }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.