admin管理员组文章数量:1323723
I'm sorry if the question is phrased with the incorrect terminology.
Basically I want to specify what style I want to change in a function by passing it a variable.
function styleChanger(ele, styleProp, x){
ele.style.styleProp = x + "px";
}
var box = document.getElementById("box");
var height = 100;
var width = 100;
var top = 500;
var styleProp = [height,width,top];
styleChanger(box, styleProp[0], height);
styleChanger(box, styleProp[1], width);
styleChanger(box, styleProp[2], top);
I want to do this but its not possible, is there a way?
I'm sorry if the question is phrased with the incorrect terminology.
Basically I want to specify what style I want to change in a function by passing it a variable.
function styleChanger(ele, styleProp, x){
ele.style.styleProp = x + "px";
}
var box = document.getElementById("box");
var height = 100;
var width = 100;
var top = 500;
var styleProp = [height,width,top];
styleChanger(box, styleProp[0], height);
styleChanger(box, styleProp[1], width);
styleChanger(box, styleProp[2], top);
I want to do this but its not possible, is there a way?
Share Improve this question asked Mar 11, 2014 at 16:19 TanilTanil 3483 silver badges18 bronze badges5 Answers
Reset to default 4On this line:
var styleProp = [height,width,top];
I think you meant:
var styleProp = ["height","width","top"];
If so: In JavaScript, you can refer to a property either using dotted notation and a literal property name (obj.foo
), or using bracketed notation and a string property name (obj["foo"]
). In the latter case, of course, you can use any expression that evaluates to a string, including a variable reference.
So within styleChanger
, you can use bracketed notation:
ele.style[styleProp] = x + "px";
// ^------- Not the same `styleProp` as above; this one is
// the arg to the `styleChanger` function
Because of the styleProp
confusion, here's a plete example with the name of the array changed:
function styleChanger(ele, styleProp, x){
ele.style[styleProp] = x + "px";
// ^----------- bracketed notation
}
var box = document.getElementById("box");
var height = 100;
var width = 100;
var top = 500;
var styleNames = ["height","width","top"];
styleChanger(box, styleNames[0], height);
styleChanger(box, styleNames[1], width);
styleChanger(box, styleNames[2], top);
Use bracket notation:
ele.style[styleProp] = ...
Like @tymeJV and @T.J.Crowder told you, you have to use bracketed notation. But i've found some bugs in your code. You shall not use the word "top" as a variable name. This may cause erros in some browsers. If you use console.log over your "top" variable in chrome, it will log "Window" not "500" as expected. Also, in the "styleProp" variable, you should use quotation marks, or else, your array will have numbers inside (from your vars) not strings. So, your code should be like that:
function styleChanger(ele, styleProp, x){
ele.style[styleProp] = x + "px";
}
var box = document.getElementById("box");
var height = 100;
var width = 100;
var _top = 500;
var styleProp = ["height","width","top"];
styleChanger(box, styleProp[0], height);
styleChanger(box, styleProp[1], width);
styleChanger(box, styleProp[2], _top);
You can use an object instead :
var box = document.getElementById("box");
var styleProp = {"height": 100, "width": 100, "top": 500};
for(var key in styleProp) {
styleChanger(box, key, styleProp[key]);
};
function styleChanger(ele, key, styleProp){
ele.style[key] = styleProp + "px";
}
I just wanted to add another way of approaching this, as well as support R3tep's answer of storing the style changes in an object:
let styleChanges = {
"#box": {
"height": "100px",
"width": "100px",
"top": "500px",
"fontFamily": "inherit"
}
}
let makeStyleChanges = (item, styleProps) => {
for(let key in styleProps) {
item.style[key] = styleProps[key];
}
}
for (let key in styleChanges){
let item = document.querySelector(el);
if(item) {
makeStyleChanges(item, styleChanges[key]);
}
}
本文标签: htmlHow to pass a variable to the style property in javascriptStack Overflow
版权声明:本文标题:html - How to pass a variable to the style property in javascript? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742124268a2421865.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论