Question

假设我想将样式元素的水平填充设置为变量'x'，并将垂直设置为变量'y'。当然，这是可能的：

var docex = document.getElementById.style;
docex.paddingTop = y;
docex.paddingBottom = y;
docex.paddingLeft = x;
docex.paddingRight = x;

我是否有更短的方式来执行此操作，例如类似于：

var docex = document.getElementById.style;
docex.paddingTop = docex.paddingBottom = y;
docex.paddingLeft = docex.paddingRight = x;

但是，正如我所理解的那样，上面的内容不起作用，并且会声明一个全局变量，正如我从本网站上的另一个问题所看到的那样。那么，对于我来说，实现类似于上面的想法的最有效的最小方法是什么呢？这可能是使用vanilla javascript吗？

提前致谢！

Answer 1

您可以使用简写CSS规则：

docex.padding = y + " " + x;

这会将y设置为顶部和底部填充，将x设置为左右填充。

MDN Reference

Answer 2

但是，据我了解，上述内容不起作用，并会声明一个全局变量

不会。

比较以下两个例子：

var foo = bar = 2;

此：

将foo声明为本地变量
将2分配给bar隐式创建bar作为全局{I}
将bar分配给foo

obj.foo = obj.bar = 2;

此：

将2分配给obj.bar隐式创建bar作为obj的属性（如果该obj.bar尚不存在
将obj.foo分配给foo隐式创建obj作为padding的属性（如果该padding: <top> <right> <bottom> <left>尚不存在

它不会创建全局，因为您没有任何提及变量名称的代码。

也就是说，由于您要更改全部填充属性，因此您可以设置padding: <vertical> <horizontal>速记属性，而不是单独执行四个属性中的每一个。

docex.padding = y + " " + x;

或

  document.getElementById("abc").addEventListener("select",function(){
     document.execCommand('selectAll',false,null);
  });

因此：

Answer 3

您可以使用style.padding

执行此操作

var x="50px";
var y="25px";

var ele = document.getElementById('o');

ele.style.padding = y+' '+x;

#o{
  width:200px;
  height:100px;
  border:1px solid black;
  box-sizing:border-box;
}
#i{
  width:100px;
  height:50px;
  background:red;
}

<div id="o">
<div id="i">
  </div></div>

我可以在Javascript中一次为多个属性分配变量值吗？

3 个答案: