使用 javascript 动态更改 css 样式

Question

我正在练习 javascript。这里我创建了一个 JS class 用于动态创建 Web 元素，例如 div、a 等。下面的代码显示了一个 class 用于创建一个 div ]元素：

class DivBlock {

 //creates the div element
 constructor(id) {
   this.ele = document.createElement('div');
   this.ele.id = id;
   this.ele.style.height = '100px';
   this.ele.style.width = '200px';
   this.ele.style.border = '1px solid black';
 }

 // sets the css properties
 css(props) {
   var keyslist = Object.keys(props);
   console.log(keyslist);
   console.log(props);
   var style = keyslist.map((keys) => {
     this.ele.style.keys = props[keys];
     return this.ele.style.keys;
   });
   console.log(style);
 }

 getId() {
   return this.ele.id;
 }

 getNode() {
   return this.ele;
 }

 //adds the div-element to the parent element/tag
 mount(parent_id) {
   document.getElementById(parent_id).appendChild(this.ele);
 }

}

var d = new DivBlock('root-div');
d.mount('root') //passing parent tag id
d.css({
 height: '500px',
 backgroundColor: 'red'
});

Html 片段：

<div id='root'> </div>

上面的代码成功创建了 div 但没有改变 css 方法提到的高度和背景颜色。 css 方法应该采用具有 css 样式属性及其值的对象并反映更改。我应该在 css 方法或代码中进行哪些更改才能使其正常工作？

Answer 1

将this.ele.style.keys = props[keys];更改为this.ele.style[keys] = props[keys];

keys 是变量，因此您需要使用括号符号来访问变量中名称为 prop 的属性。否则，您将尝试访问 style 的属性，字面上命名为 keys。

class DivBlock {

  //creates the div element
  constructor(id) {
    this.ele = document.createElement('div');
    this.ele.id = id;
    this.ele.style.height = '100px';
    this.ele.style.width = '200px';
    this.ele.style.border = '1px solid black';
  }

  // sets the css properties
  css(props) {
    var keyslist = Object.keys(props);
    console.log(keyslist);
    console.log(props);
    var style = keyslist.map((keys) => {
      this.ele.style[keys] = props[keys];
      return this.ele.style[keys];
    });
    console.log(style);
  }

  getId() {
    return this.ele.id;
  }

  getNode() {
    return this.ele;
  }

  //adds the div-element to the parent element/tag
  mount(parent_id) {
    document.getElementById(parent_id).appendChild(this.ele);
  }

}

var d = new DivBlock('root-div');
d.mount('root') //passing parent tag id
d.css({
  height: '500px',
  backgroundColor: 'red'
});

<div id='root'> </div>

使用 javascript 动态更改 css 样式

Changing css styling dynamically using javascript

html

javascript

css

dom

dom-manipulation