位置: IT常识 - 正文

【前端学习笔记—使用JS修改样式】(前端基础入门)

编辑:rootadmin
【前端学习笔记—使用JS修改样式】 目录JS修改样式的九种方式1.直接设置style的属性2.直接设置属性3.设置style的属性4.使用setProperty5.改变class (推荐)6.设置cssText7.引入css样式文件8.使用addRule、insertRule9、通过classList控制样式JS修改样式的九种方式1.直接设置style的属性

推荐整理分享【前端学习笔记—使用JS修改样式】(前端基础入门),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端实战教程,前端入门知识,前端教程视频,前端基础教学视频,前端 教程,前端基础教学视频,前端的基础知识,前端入门视频教程,内容如对您有帮助,希望把文章链接给更多的朋友!

style属性可以设置或返回元素的内联样式,对于更改同一个元素的同一种样式,设置style属性的优先级较高

语法:element.style.property = valueproperty为CSS属性名,如:color,margin。如果属性名原来包含“-”,则需转换为小驼峰形式,如:backgroundColor,marginLeft。var box = document.querySelector('div')box.style.color = "#fff" // 将元素中文字设置为白色 box.style.marginLeft = "100px" // 将元素左外边距设置为100px 【前端学习笔记—使用JS修改样式】(前端基础入门)

某些情况用这个设置 !important值无效

如果属性有’-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式

element.style.height = '100px';2.直接设置属性

只能用于某些属性,相关样式会自动识别

element.setAttribute('height', 100);element.setAttribute('height', '100px');3.设置style的属性element.setAttribute('style', 'height: 100px !important');4.使用setProperty如果要设置!important,推荐用这种方法设置第三个参数element.style.setProperty('height', '300px', 'important');5.改变class (推荐)通过改变伪元素父级的class来动态更改伪元素的样式element.className = 'blue';element.className += 'blue fb';6.设置cssTextelement.style.cssText = 'height: 100px !important';element.style.cssText += 'height: 100px !important';7.引入css样式文件创建引入新的css样式文件 function addNewStyle(newStyle) { var styleElement = document.getElementById('styles_js'); if (!styleElement) { styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.id = 'styles_js'; document.getElementsByTagName('head')[0].appendChild(styleElement); } styleElement.appendChild(document.createTextNode(newStyle)); } addNewStyle('.box {height: 100px !important;}');8.使用addRule、insertRule// 在原有样式操作 document.styleSheets[0].addRule('.box', 'height: 100px'); document.styleSheets[0].insertRule('.box {height: 100px}', 0); // 或者插入新样式时操作 var styleEl = document.createElement('style'), styleSheet = styleEl.sheet; styleSheet.addRule('.box', 'height: 100px'); styleSheet.insertRule('.box {height: 100px}', 0); document.head.appendChild(styleEl);9、通过classList控制样式classList属性返回一个元素类属性集合(这里可以简单理解为类名的集合),通过使用classList中的方法可以方便的访问和控制元素类名,达到控制样式的目的

classList常用方法介绍:

名称描述add(class1, class2, …)添加一个或多个类名remove(class1, class2, …)移除一个或多个类名replace(oldClass, newClass)替换类名contains(class)判定类名是否存在,返回布尔值toggle(class, true|false)如果类名存在,则移除它,否则添加它,第二个参数代表无论类名是否存在,强制添加(true)或删除(false)<div class="box">classList test</div><script> var box = document.querySelector('.box') box.classList.add('box1', 'box2') // [box] => [box, box1, box2] box.classList.remove('box1', 'box2') // [box, box1, box2] => [box] box.classList.replace('box', 'box2') // [box] => [box2] box.classList.contains('box1') // 当前元素不包含类名box1,返回false box.classList.toggle('active') // [box2] => [box2, active]</script>

如果以上知识对你有用欢迎点赞和关注~ 谢谢~

本文链接地址:https://www.jiuchutong.com/zhishi/296091.html 转载请保留说明!

上一篇:【React Router v6】这17个API,你真的都懂了吗?(建议收藏)(react_router)

下一篇:vue中 router.beforeEach() 的用法

  • iphonex面容设置不了(iphonex面容设置时提示无法识别)

    iphonex面容设置不了(iphonex面容设置时提示无法识别)

  • android是开发语言吗(android的开发)

    android是开发语言吗(android的开发)

  • 红外感应灯原理(红外线感应灯原理)

    红外感应灯原理(红外线感应灯原理)

  • 苹果充电80%就充不进去怎么回事(苹果充电到80%就不充)

    苹果充电80%就充不进去怎么回事(苹果充电到80%就不充)

  • 手机图片上传不了是啥原因(手机图片上传不上去是怎么回事)

    手机图片上传不了是啥原因(手机图片上传不上去是怎么回事)

  • 华为nova5pro返回键怎么调到手机屏上(华为nova5pro返回键怎么调出来)

    华为nova5pro返回键怎么调到手机屏上(华为nova5pro返回键怎么调出来)

  • 科学计算应用领域有哪些(科学计算应用领域有哪些例子)

    科学计算应用领域有哪些(科学计算应用领域有哪些例子)

  • 微信怎么没有暗黑模式(微信设置暗色)

    微信怎么没有暗黑模式(微信设置暗色)

  • 打印机副本是什么意思(打印机副本处于错误状态是什么原因)

    打印机副本是什么意思(打印机副本处于错误状态是什么原因)

  • iphone7p有没有深色模式(苹果7怎么开深景效果)

    iphone7p有没有深色模式(苹果7怎么开深景效果)

  • 淘宝退款关闭是什么意思(淘宝退款关闭是什么意思怎么申请)

    淘宝退款关闭是什么意思(淘宝退款关闭是什么意思怎么申请)

  • 苹果8内存有几个版本(苹果8内存有几种型号)

    苹果8内存有几个版本(苹果8内存有几种型号)

  • 没有鼠标怎么拖动东西(没有鼠标怎么拖动图片)

    没有鼠标怎么拖动东西(没有鼠标怎么拖动图片)

  • 拼多多9.9元的手机在哪里找(拼多多9.9元的手机是真的吗)

    拼多多9.9元的手机在哪里找(拼多多9.9元的手机是真的吗)

  • 三星note和s谁是旗舰(三星的note和s系列哪个更好)

    三星note和s谁是旗舰(三星的note和s系列哪个更好)

  • 微信签名怎么设置在中间(微信签名怎么设置成二行)

    微信签名怎么设置在中间(微信签名怎么设置成二行)

  • 苹果xs充电是多少w(苹果xs充电电流多少安)

    苹果xs充电是多少w(苹果xs充电电流多少安)

  • 手机qq好友亲密度怎么涨(手机qq好友亲密度怎么关闭)

    手机qq好友亲密度怎么涨(手机qq好友亲密度怎么关闭)

  • 红米k20pro有小爱同学吗(红米k20pro小爱你在哪)

    红米k20pro有小爱同学吗(红米k20pro小爱你在哪)

  • 手机ca证书怎么删除(手机ca证书怎么申请流程)

    手机ca证书怎么删除(手机ca证书怎么申请流程)

  • 松树上的一只美国黑熊幼崽,加拿大贾斯珀国家公园 (© Donald M. Jones/Minden Pictures)(树上有只松鼠简笔画)

    松树上的一只美国黑熊幼崽,加拿大贾斯珀国家公园 (© Donald M. Jones/Minden Pictures)(树上有只松鼠简笔画)

  • 蔚蓝海域中的马提尼克岛,加勒比海 (© Airpano LLC/Amazing Aerial Agency)(蔚蓝的海怎么样)

    蔚蓝海域中的马提尼克岛,加勒比海 (© Airpano LLC/Amazing Aerial Agency)(蔚蓝的海怎么样)

  • RuntimeError: (PreconditionNotMet) The third-party dynamic library (cudnn64_7.dll) that Paddle depen

    RuntimeError: (PreconditionNotMet) The third-party dynamic library (cudnn64_7.dll) that Paddle depen

  • 【前后端分离系列】 Spring Boot + Vue 实现 EasyPOI 导入导出(前后端分离与不分离)

    【前后端分离系列】 Spring Boot + Vue 实现 EasyPOI 导入导出(前后端分离与不分离)

  • 什么是电子银行渠道限额
  • 企业给员工交公积金国家有规定的
  • 短期借款现金流
  • 小规模纳税人季度超过45万怎么交税
  • 股东借给公司的钱怎么归还
  • 资产处置损益属于收入吗
  • 总分机构汇算清缴成功后还需要填表什么报表
  • 委托加工物资增值税怎么算
  • 财务费用利息收入借方表示什么
  • 工会经费征税吗
  • 税控盘未按时抄报处罚
  • 12月份未计提的费用汇算清缴如何调整?
  • 研发新产品成功案例简短
  • 票据权利的概念与性质
  • 个体工商户交纳社保办法
  • 拆迁安置房建设流程
  • 在职员工 开公司
  • 审计调整分录如何处理
  • 设计服务交文化建设税吗
  • win11更新失败怎么办
  • 电脑开机自动进入bios怎么解决
  • 电脑开机无启动
  • 建筑工地发生的典型意外情况有哪些
  • 超市库存商可以分为几大类
  • PHP:xml_parser_create()的用法_XML解析器函数
  • 手相算命图解大全女
  • 如何预防电脑系统崩溃
  • 售后租回交易形成融资租赁会计处理
  • 在途货物退货
  • 城市:天际线
  • 代扣代缴企业所得税如何申报
  • vue2和vue3的兼容
  • mysql封装函数
  • 长期待摊费用装修费摊销年限
  • 退预收款需要对方同意吗
  • rabbitmq中文手册
  • 帝国cms真的很好用
  • 回扣没拿到也算违法吗
  • 预收账款期末余额在借方还是贷方
  • 公司清算的特征
  • 数据库关键字有哪些
  • PostgreSQL教程(二十):PL/pgSQL过程语言
  • 服务费发票的税率
  • 收到一张普通发票怎么做账
  • 押金和租金
  • 外汇是先入帐还是先申报
  • 递延收益金额怎么算
  • 建筑公司支付给农民工的工资需要取得发票吗
  • 冲红发票如何做账务处理
  • 固定资产出售增值税减按2%征收,附表一,填写
  • 超市被盗怎么办
  • 工程款发票怎么做分录
  • 免征印花税的6个项目
  • 本年利润的年末余额
  • 劳务报酬个税如何入账
  • 被征用的不动产或者动产使用后应当怎样
  • sql注入讲解
  • 断电恢复
  • Mysql主从同步的实现原理
  • 活动目录管理工具
  • mac如何强制退出微信
  • centos编译器
  • windows英文版本
  • win10系统浏览器设置主页
  • Windows RT 8.1 Update 3九月发布 届时将加入改进版锁屏
  • 东芝笔记本配件
  • win8怎么查看系统信息
  • win8微软拼音输入法打不出中文
  • 关闭windows游戏
  • linux克隆虚拟机
  • js入门基础
  • .bat文件如何编写
  • JavaScript中的数据类型分为两大类
  • jquery的checkbox,radio,select等方法小结
  • jquery 滑动显示
  • android下载文件保存到本地
  • 税务文书送达地点
  • 税务稽查局稽查财务不在场怎么办
  • 安徽省电子税务局怎么添加办税人员
  • 同比减少怎么计算出来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设