Динамическое изменение стиля css с использованием javascript - PullRequest
Новая
       75

Динамическое изменение стиля css с использованием javascript

1 голос
/ 21 марта 2020

Я практикую javascript. Здесь я создаю класс JS для динамического создания веб-элементов, таких как div, a, et c. В следующем коде показан класс для создания элемента 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 или в код, чтобы он работал?

1 Ответ

1 голос
/ 21 марта 2020

Измените this.ele.style.keys = props[keys]; на this.ele.style[keys] = props[keys];

keys - переменная, поэтому вам нужно использовать скобку, чтобы получить доступ к реквизиту, имя которого находится в переменной. В противном случае вы пытаетесь получить доступ к свойству 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>
...