Как динамически изменить css после клика? И после того, как снова нажмите go вернуться к умолчанию? - PullRequest
Новая
       1

Как динамически изменить css после клика? И после того, как снова нажмите go вернуться к умолчанию?

0 голосов
/ 07 января 2020

У меня есть небольшая проблема ... но, к сожалению, большая для меня ... Я подготовил демо для вас, ребята: 

$('#rulerSlider').click(function() {
  $('#canvas').css({
    'margin-left': '0px',
    'margin-top': '0px'
  });
});
#justdraw {
  position: relative;
  width: 100%;
  height: 200px;
  overflow-y: hidden;
  margin-left: 20px;
  margin-top: 20px
}

#ruler {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

#canvas {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: scroll;
}

/* slider */ 
.slider {
  bottom: 350px;
  left: 300px;
  width: 80px;
  height: 26px;
  background: #333;
  /*margin: 20px auto;*/
  margin-left: 35px;
  position: absolute;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.slider:after {
  content: 'OFF';
  color: #000;
  position: absolute;
  right: 10px;
  bottom: 0px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}

.slider:before {
  content: 'ON';
  color: #3bb100;
  position: absolute;
  left: 10px;
  top: 1px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
}

.slider label {
  display: block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  transition: all 0.4s ease;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.slider input[type=checkbox] {
  visibility: hidden;
}

.slider input[type=checkbox]:checked+label {
  left: 43px;
}

/* end slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="justdraw">
  <div id="ruler">
    <div id="canvas">
      <canvas id="diagram" width="2100" height="2100">
      </canvas>
    </div>
  </div>
</div>

<div>
  <div class="slider">
    <input type="checkbox" value="None" id="rulerSlider" name="check" checked />
    <label for="rulerSlider"></label>
  </div>
</div>

У меня проблемы со следующими шагами:
0. Состояние по умолчанию ползунка (ВКЛ)
1. Нажмите ползунок (OFF)
2. Удалите поля 20 из # justdraw 

#justdraw {
  margin-left: 20px; /* ---> margin-left: 0px;   */
  margin-top: 20px   /* ---> margin-right: 0px;  */
}

3. Снова нажмите ползунок (ON)
4. Добавьте поля 20 к # justdraw 

#justdraw {
  margin-left: 0px; /* ---> margin-left: 20px;   */
  margin-top: 0px   /* ---> margin-right: 20px;  */
}

Может кто-нибудь помочь? Я закончил с этим ... Я попытался использовать javascript немного, но безуспешно.

1 Ответ

2 голосов
/ 08 января 2020

@ Brarod

Попробуйте этот код, чтобы добавить и удалить css, он работает правильно. 

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){
    $("#btn4").click(function(){
    $("#toggle1").toggleClass("intro");
  });

});
    </script>
    <style>
        .intro {
            font-size: 200%;
            background-color:black;
            text-shadow:1px 2px 3px yellow;
            color: red;
        }
    </style>
    <title>Tenth Demo Page</title>
</head>
<body>
    <div>
        <h3>Toggle Class</h3>
        <p id="toggle1">Hello!! This My Tenth Demo Page....<code>◙♣♣♣♣☼╧@á</code></p>
        <button id="btn4">Add Toggle Class</button>
    </div>
</body>
</html>

Надеюсь, приведенный выше код будет вам полезен.

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...