为什么JS遗漏了第四个边距属性

Why is this JS leaving out the fourth margin property?

本文关键字：四个 属性 JS 为什么      更新时间：2023-09-26
var parallax = document.querySelectorAll(".slider-parallax"),
    speed = 0.5;
    window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
        var windowYOffset = "-" + window.pageYOffset,
        elBackgrounPos = (windowYOffset * speed) + "px 0 0 0";
        el.style.margin = elBackgrounPos;
        });
    };

预期的行为是浏览器将margin: -0px 0 0 0呈现为inline-css。但是最后一个值每次都会被忽略。

如果您将上面的值更改为仅px 0，因此它适用于顶部和底部，它工作。

https://jsfiddle.net/vqdh4k0z/

理想情况下，我只想为margin-top应用一个负值。有更简单的方法吗?

实际上，你的代码工作，你没有在inline-css中看到4个值的原因是写margin: 10px 0 0 0相当于margin: 10px 0 0，这只是浏览器优化你的css。

如果你只想写margin-top属性，只需这样做:

window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
            var windowYOffset = "-" + window.pageYOffset;
            var elBackgrounPos = (windowYOffset * speed) + "px";
            el.style.marginTop = elBackgrounPos;
        });
    };

如果你需要知道属性的名称，只需检查MDN参考页面，在JavaScript中，名称通常变成驼峰式的，如margin-top到marginTop。

相关文章：