html元素,属性修改-阿里云开发者社区

开发者社区> 景凌凯> 正文

html元素,属性修改

简介: html通过js修改页面中内容,标签属性,为标签添加id与class,为标签删除属性。
+关注继续查看
修改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/ 分享前端知识

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue 仿钉钉流程图(流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】 附 demo)
# [这里是git地址](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
6 0
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记)
7 0
数据类型-数值和字符串 | 学习笔记
快速学习数据类型-数值和字符串。
5 0
作用域及作用域链 | 学习笔记
快速学习作用域及作用域链。
5 0
阿里巴巴数据库分库分表的实践(6)
阿里巴巴数据库分库分表的实践(6)
9 0
代码注释 | 学习笔记
快速学习代码注释。
9 0
求数组元素的和 | 学习笔记
快速学习求数组元素的和。
6 0
我的历程分享
简述我的学习生涯
15 0
函数的返回值 | 学习笔记
快速学习函数的返回值。
6 0
函数当作参数2 | 学习笔记
快速学习函数当作参数2。
6 0
+关注
景凌凯
有点尴尬唉 你要寻找的东西已经被吃掉啦!
47
文章
1366
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载