Изменение заполнения через JS

Question

Мне нужно изменить padding-bottom с -50% до -40%, вот мой код CSS

.mid {
    background-color: rgba(255,205,147,0.68);
    border-radius: 25px;
    margin-top: 18%;
    margin-right: 10%;
    margin-left: 10%;   
    padding-top: 50%;
    padding-bottom: -40%;
    background-attachment: fixed;
    box-shadow: 9px -12px 5px rgba(0,0,0,0.5);
}

, а вот мой код JS

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.padding-bottom == -40%)
        {
    mid.style.padding-bottom == -30%;
        }
        else {
        mid.style.padding-bottom = -40%;
        }
   }

Здесьэто то, что я вижу в консоли браузера

 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:3 Uncaught SyntaxError: Unexpected token )
8index.html:72 Uncaught ReferenceError: buttonReady is not defined
    at HTMLButtonElement.onclick (index.html:72)

Answer 1

Я вижу, по крайней мере, три вещи не так с вашим кодом:

1. вы, кажется, не запускаете созданную вами функцию.объявив его, вам нужно запустить его с buttonReady();
2. , как только вы запустите свою функцию, вы увидите ошибку в консоли вашего браузера, потому что переменные Javascript не могут иметь тире в своих именах.
3. вам нужно поставить -30% и -40% внутри кавычек.Символ - обрабатывается Javascript как оператор вычитания, а символ % обрабатывается как оператор по модулю.Если вы пытаетесь сравнивать строки, вам нужно относиться к ним как к таковым.

Я также вижу некоторые вещи не так, как вы пытаетесь решить проблему:

1. getElementsByClassName вернет список вещей, даже если у вас есть только одна из этих вещей на вашей странице.вам нужно либо предоставить другой ввод для этой функции, либо использовать другую функцию, либо
2. у вас есть переменная с именем mid в некоторых местах, но expandMid в других местах.это допустимый код Javascript (поскольку предполагается, что переменные, не объявленные заранее, будут присоединены к window), но при запуске вы получите ошибку, так как эта переменная не существует в окне.

Answer 2

Надеюсь, эта работа.Вы сохраняли "mid" ref в "expandMid", но использовали "mid" напрямую.

var expandMid = document.getElementsByClassName("mid");
function buttonReady() {
    if (expandMid.style.paddingBottom == -40%){
          expandMid.style.paddingBottom == -30%;
        }
        else {
          expandMid.style.paddingBottom = -40%;
        }
   }

Answer 3

Padding-bottom - это вычисляемое свойство вашего css, поэтому вы не сможете получить доступ к padding-bottom через elem.style.paddingBottom.

Решение этой проблемы с помощью jQuery

Я бы порекомендовал этот метод, чтобы он был совместим с различными браузерами.

$(document).ready(function() {
  var elem = $('.block');
  
  // access paddingBottom like so...
  // console.log(elem.css('paddingBottom'));

  $('#set-padding').on('click', function() {
    var newPaddingBottomValue = '100px';
    if (elem.css('paddingBottom') !== '50px') {
      newPaddingBottomValue = '50px';
    }
    elem.css('paddingBottom', newPaddingBottomValue);
  });
});

.block {
  width: 10px;
  height: 10px;
  background: black;
  padding-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<h5>some heading to show padding changes</h5>
<button id="set-padding">Toggle padding</button>

Решение этой проблемы без jQuery

Это не поддерживается в IE8 или ниже!

(function() {
  var elem = document.getElementById('block');
  var btn = document.getElementById('toggle-padding');
  
  btn.addEventListener('click', function() {
    var newPaddingBottomValue = '100px';
    if (window.getComputedStyle(elem).paddingBottom !== '50px') {
      newPaddingBottomValue = '50px';
    }
    elem.style.paddingBottom = newPaddingBottomValue;
  });
})();

#block {
  width: 10px;
  height: 10px;
  background: black;
  padding-bottom: 50px;
}

<div id="block"></div>
<button id="toggle-padding">Toggle padding</button>

Answer 4

Вы получаете синтаксическую ошибку.Потому что в JS нельзя использовать некоторые специальные символы и предполагать, что они будут просто работать.Итак, символ - (минус) - это специальный математический оператор.То, что вы можете использовать в CSS, но не в JS!

Итак, если вы хотите получить доступ к чему-то, имеющему специальный символ (например, свойства стиля css), напишите свойство как регистр верблюда.

expandMid.style.paddingBottom // would give you the access.

Обратите внимание, что значение paddingBottom должно быть строкой.Не номер.Итак, для сравнения используйте: if (expandMid.style.paddingBottom === '40%') ...

Вот почему вы не можете применить отрицательное значение заполнения source

Дайте мне знать, помогло ли это!

Answer 5

Поскольку дефисы недопустимы в идентификаторах javascript, вам нужно использовать camelCase вместо kebab-case для имен стилей, например:

expandMid.style.paddingBottom

Кроме того, вы, похоже, неправильно называете имена переменных.Иногда элемент упоминается как expandMid, иногда как mid