通过 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

由于破折号在 javascript 标识符中是不合法的，因此您需要使用 camelCase 而不是 kebab-case 作为样式名称，如下所示：

expandMid.style.paddingBottom

另外，您的变量名似乎有误。有时，该元素称为expandMid，有时称为mid

Answer 2

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

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

Answer 3

我发现您的代码至少有三处错误：

1. 您似乎没有运行您创建的函数。声明后，您需要使用buttonReady(); 运行它
2. 运行函数后，您会在浏览器的控制台中看到一个错误，因为 Javascript 变量的名称中不允许包含破折号。
3. 您需要将-30% 和-40% 放在引号内。 - 字符被 Javascript 视为减法运算符，% 字符被视为模运算符。如果您尝试比较字符串，则需要这样对待它们。

我还发现您尝试解决问题的方式存在一些问题：

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

Answer 4

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

因此，如果您想访问具有特殊字符的内容（例如 css 的样式属性），请将属性写为驼峰式。

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

注意paddingBottom 的值应该是一个字符串。不是数字。因此，用于比较：if (expandMid.style.paddingBottom === '40%') ...

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

如果有帮助，请告诉我！

Answer 5

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>