property改变了也会在标签里显示啊

Question

property改变了也会在标签里显示啊

Answer 1

ElvinLong 2021-03-11 14:39:18

老师您好，修改html 标签的特定属性会修改HTML 例如

<img src='xx' id='img' />

const img = document.getElementById('img')
img.alt = '图片' // 会改变HTML
img.width = 100 // 会改变HTML
img.abc = 'abc' // 不会改变HTML

执行后 HTML会变成下面这种

<img src=“xx” id="img" alt="图片" width="100" />

请问这是什么原因？

• 双越 #1

  这些属性都是 img 标签的重要属性。如果不同步修改，那就 js 和 DOM 属性就矛盾了，所以必须同步修改。

• ElvinLong 回复 双越 #2

  非常感谢双越老师回答！所以我能这么理解吗，如果通过property 修改 HTML 标签的重要属性，比如 img 的src，width 那么 html 就会同步修改。顺便提个问题就是，像这种问题请问我能在哪里查找到对应的资料?

• 双越 回复 ElvinLong #3

  这个知识点稍微细碎了，我也没注意哪里有写。你可以去 MDN 上看一看，不过得仔细找，MDN 内容太多了。

Answer 2

双越 2020-01-19 19:04:01

你改的是 style 属性吧？这个肯定会改样式的。

如果你要在 DOM 阶段存储一些数据，用 props 和 attrs 还是不一样的。例如

const elem1 = document.getElementById('p1');
elem1.a = 100; // 使用 props ，不会改变 DOM 节点
elem1.setAttrbute('a', 100); // 使用 attrs ，会改变 DOM 节点

• ElvinLong #1

  老师您好，修改html 标签的特定属性会修改HTML 例如
  
  ```
  <img src='xx' id='img' />
  ```
  ```
  const img = document.getElementById('img')
  img.alt = '图片' // 会改变HTML
  img.width = 100 // 会改变HTML
  img.abc = 'abc' // 不会改变HTML
  ```
  执行后 HTML会变成下面这种
  
  ```
  <img src=“xx” id="img" alt="图片" width="100" />
  ```
  请问这是什么原因？