Question

我需要将填充底部从-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

由于破折号在javascript标识符中是不合法的，因此您需要使用camelCase而不是kebab-case来命名样式，例如：

expandMid.style.paddingBottom

此外，您似乎错误地使用了变量名。有时，该元素被称为expandMid，有时被称为mid

Answer 2

Padding-bottom是CSS的计算属性，因此，您将无法通过elem.style.paddingBottom访问padding-bottom。

使用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 3

您遇到语法错误。因为在JS中，您不能使用某些特殊字符并假设它们会起作用。因此，-（减号）字符是特殊的数学运算符。您可以在CSS中使用，但不能在JS中使用！

因此，如果要访问具有特殊字符的内容（例如CSS的样式属性），请将该属性写为驼峰式大小写。

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

请注意，paddingBottom的值应为字符串。没有数字。因此，为了进行比较，请使用：if (expandMid.style.paddingBottom === '40%') ...

这就是为什么您不能应用负填充值source
的原因

让我知道是否有帮助！

Answer 4

希望这项工作。您将“ mid”参考保存在“ expandMid”中，但直接使用了“ mid”。

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

Answer 5

我发现您的代码至少存在三件事：

您似乎没有运行您创建的功能。声明之后，您需要使用buttonReady();
一旦运行函数，您将在浏览器的控制台中看到一个错误，因为Javascript变量的名称中不允许带有破折号。
您需要将-30%和-40%放在引号内。 JavaScript将-字符视为减法运算符，并将%字符视为模运算符。如果您要比较字符串，则需要对它们进行同样的处理。

我也看到您尝试解决问题的方式有几处错误：

getElementsByClassName将返回事物列表，即使页面上只有这些事物之一也是如此。您需要为该功能提供不同的输入，或者使用其他功能，或者需要
在某些地方，您有一个名为mid的变量，而在其他地方，您有一个expandMid的变量。这是有效的Javascript代码（因为未提前声明的变量将被假定附加在window上），但是在运行它时会导致错误，因为该变量在窗口中不存在。

通过JS更改填充

5 个答案:

使用jQuery解决此问题

在没有jQuery的情况下解决此问题