Question

如何使用javascript或jquery点击下面的CSS。有谁知道怎么做？

#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}

我的目标是当用户点击应该应用CSS的HTML元素时，当他点击关闭按钮时，应该从元素中删除CSS。

Answer 1

<强> HTML

   <button id="start">Start</button> 
     <button id="close">Close</button>

<强> JS

$('#start').click(function () {
        $(this).addClass('start');

    });

$('#close').click(function () {
        $('#start').removeClass('start');

    });

<强> CSS

.start
{
// css style here
}

Answer 2

您需要element.classList - Web API Interfaces 如果你想使用不同的按钮试试这个

＆＃13;

function addclass() {
  mydiv.classList.add("visible");
}

function removeclass() {
  mydiv.classList.remove("visible");
}

var addButton = document.querySelector(".addButton"),
    removeButton = document.querySelector(".removeButton"),
    mydiv = document.querySelector(".mydiv");


addButton.addEventListener("click", addclass, false);
removeButton.addEventListener("click", removeclass, false);

＆＃13;

.mydiv{
  width: 150px;
  height: 150px;
  background: red;
  margin: 20px auto
}

.visible{
  opacity: .1;
}

＆＃13;

<div class=mydiv ></div>
<button class=addButton>Add Class<button>
<button class=removeButton>Remove Class<button>

＆＃13;

只是切换它

var div = document.querySelector(".mydiv");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

关于如何使用的完整示例是：

＆＃13;

 
function modifyopacity() {
  this.classList.toggle("visible");
}
 
var div = document.querySelector(".mydiv");
div.addEventListener("click", modifyopacity, false);

＆＃13;

.mydiv{
  width: 150px;
  height: 150px;
  background: red;
  margin: 20px auto
}

.visible{
    opacity: .1;
}

＆＃13;

<div class=mydiv ></div>

＆＃13;

如何在点击时添加css并在单击关闭按钮时将其删除

2 个答案: