html元素,属性修改

最新推荐文章于 2025-02-17 14:03:35 发布

weixin_34417200

最新推荐文章于 2025-02-17 14:03:35 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：https://yq.aliyun.com/articles/629020

修改html页面内容

 
   title.textContent="<i>js还可以修改元素内容</i>"; 
  
   title.innerHTML="<i>js还可以修改元素的内容</i>";

textContent设置的内容中标签会显示为标签文本会将i标签也显示出来，不会显示斜体
innerHtml中的标签会被解析为元素对象显示斜体

修改html样式

var title = document.getElementById( "title" );

// 元素对象通过style属性修改样式。

title.style.color = "red" ;

// 在css中样式是通过-分隔，在js中，样式名要用驼峰命名法。

title.style.fontSize = "20px" ;

// 通过js修改的样式实际上修改的是元素的行内样式。

通过同名属性修改

// 大部分的html属性，都可以在js中通过元素对象的同名属性进行修改，
例如a标签的href属性，
img的src属性，
input的placehodeer属性等

link.href = "http://www.eotodo.com" ;

   // 元素对象的classList表示元素的class列表，。add方法用于添加一个class值。
  
   title.classList.add(
   "c1"
   ); 
  
   // .remove删除一个class值
  
   title.classList.remove(
   "c3"
   ); 
  
   // toggle.切换一个class值（有则删除，无则添加）
  
   title.classList.toggle(
   "c1"
   ); 
  
   // 判断某个元素的class中是否包含某个值
  
console.log(title.classList.contains("c4"));
 
     // 对于元素的class属性，它可以设置多个值。

 它是一个列表形式的数据，修改时不会修改全部，

 而是添加一个class值或删除一个已有的class值，

 所以class的修改不能直接改元素对象的class属性。
     
     // title.class="c1"; 错误的写法
    
     我的个人博客网站:http://www.eotodo.com/ 分享前端知识