位置: 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() 的用法

  • 微信积分怎么开通(微信积分怎么开通积分功能)

    微信积分怎么开通(微信积分怎么开通积分功能)

  • 华为右滑的那个界面怎么设置(华为右滑的那个界面怎么开)

    华为右滑的那个界面怎么设置(华为右滑的那个界面怎么开)

  • bilibili手机端能扫码登录吗(哔哩哔哩手机端能扫码登录吗)

    bilibili手机端能扫码登录吗(哔哩哔哩手机端能扫码登录吗)

  • wps无法打开数据源是怎么回事(wps2019无法打开数据源)

    wps无法打开数据源是怎么回事(wps2019无法打开数据源)

  • 如何注销支付宝账户(如何注销支付宝账号实名认证)

    如何注销支付宝账户(如何注销支付宝账号实名认证)

  • 小米9上市时间(小米10pro什么时候上市)

    小米9上市时间(小米10pro什么时候上市)

  • 华为平板如何关闭正在运行的程序(华为平板如何关闭智慧搜索功能)

    华为平板如何关闭正在运行的程序(华为平板如何关闭智慧搜索功能)

  • 华为手机网络模式没了(华为手机怎么上外网)

    华为手机网络模式没了(华为手机怎么上外网)

  • word电脑波浪线怎么打出来(电脑word波浪线怎么打)

    word电脑波浪线怎么打出来(电脑word波浪线怎么打)

  • 高通730g相当于骁龙多少(高通730g相当于什么处理器)

    高通730g相当于骁龙多少(高通730g相当于什么处理器)

  • iphonexsmax打字不流畅(iphonexsmax打字不灵敏是屏幕问题吗)

    iphonexsmax打字不流畅(iphonexsmax打字不灵敏是屏幕问题吗)

  • 200兆宽带用450兆路由器行吗(200兆宽带用450兆路由器网速怎么样)

    200兆宽带用450兆路由器行吗(200兆宽带用450兆路由器网速怎么样)

  • 腾讯视频只有声音没有画面怎么回事(腾讯视频只有声音没画面)

    腾讯视频只有声音没有画面怎么回事(腾讯视频只有声音没画面)

  • 微信上下滑动有卡顿现象(微信上下滑动怎么设置)

    微信上下滑动有卡顿现象(微信上下滑动怎么设置)

  • 抖音可以上传多大的视频文件(抖音可以上传多长时间的视频文件)

    抖音可以上传多大的视频文件(抖音可以上传多长时间的视频文件)

  • 华为网络正常app连不上网络(华为网络正常,唯独刷视频加载不出来)

    华为网络正常app连不上网络(华为网络正常,唯独刷视频加载不出来)

  • 为什么手机下载微信解析包错误(为什么手机下载的应用不在桌面上)

    为什么手机下载微信解析包错误(为什么手机下载的应用不在桌面上)

  • 苹果型号ml开头是什么版本(苹果型号ml开头什么意思)

    苹果型号ml开头是什么版本(苹果型号ml开头什么意思)

  • 美团商家取消订单对商家有什么影响(美团商家取消订单怎么申诉)

    美团商家取消订单对商家有什么影响(美团商家取消订单怎么申诉)

  • vue加流动字幕怎么弄(vue添加完字幕怎么保存)

    vue加流动字幕怎么弄(vue添加完字幕怎么保存)

  • 荣耀20s有nfc吗(荣耀20s手机有nfc功能么)

    荣耀20s有nfc吗(荣耀20s手机有nfc功能么)

  • 如何解除青少年模式(如何解除青少年游戏限制)

    如何解除青少年模式(如何解除青少年游戏限制)

  • 苹果11充电器和之前一样吗(苹果11充电器和苹果7一样吗)

    苹果11充电器和之前一样吗(苹果11充电器和苹果7一样吗)

  • 微信绑定银行卡怎么改名(微信绑定银行卡步骤)

    微信绑定银行卡怎么改名(微信绑定银行卡步骤)

  • 怎么看好友多少天(怎么看好友多少天不是认识多少天)

    怎么看好友多少天(怎么看好友多少天不是认识多少天)

  • 美团夜宵红包怎么用(美团夜宵红包怎么领取)

    美团夜宵红包怎么用(美团夜宵红包怎么领取)

  • Dell笔记本刷回低版本bios的方法详细教程(dell笔记本如何恢复系统)

    Dell笔记本刷回低版本bios的方法详细教程(dell笔记本如何恢复系统)

  • 企业租车能抵增值税吗
  • 领用工程物资的账务处理
  • 房地产企业什么时候开具正式发票
  • 城建税是什么税率
  • 一般纳税人购买二手车可以抵扣嘛
  • 如何确定固定资产的原始价值
  • 银行提备用金怎么提
  • 现金形式发放的福利需要扣税吗
  • 企业应收票据贴现给银行所获得的现金计入现金流量表
  • 工会经费如何做会计分录科目
  • 社保补贴收入要交税吗?
  • 职工在病假领取失业金
  • 未认证发票进项税分录
  • 把公司的设备弄坏了怎么办
  • 不动产进项税额抵扣最新通知2023
  • 开专票还需要提供营业执照?
  • 发票章和税号不匹配
  • 外币报表折算差额为负数代表
  • 领款凭证可以当收据吗
  • 房租发票税金谁承担
  • 应收账款的内容包括
  • 事业单位坏账准备的计提方法
  • 收到服务费发票怎么做账
  • 支付的测试报告怎么查
  • php怎么设置中文
  • 销售货物支付运杂费要交增值税吗
  • 土地投资入股是否缴纳土地增值税12366
  • 员工的医药费
  • php的file函数
  • 竞业限制违反了怎么办
  • vue 使用高德地图
  • 金融负债期末可以转出吗
  • 出租经营的开发产品应视为企业的
  • 跨年费用计入未分配利润
  • 阿布鲁佐的特点
  • 怎么开通公众号微信公众平台
  • 安装exclipse
  • node.js最新版本
  • 织梦收费5800的解决方法
  • 深入分析的成语
  • sql server job
  • 无偿调拨资产怎么提折旧
  • sql使用cast进行数据类型转换示例
  • mysql存储引擎的作用
  • 小规模纳税人可以开票吗?
  • 红冲作废怎么处理
  • 冲销以前年度多计提的费用分录
  • 应收账款余额要包含应收票据吗
  • 公司向个人借款怎么做账
  • 事业单位基建账套会计科目
  • 个税计提多了怎么办,跨年度了
  • 发票金额比实际支付金额大
  • 年末递延所得税资产的账面余额
  • 影响以前年度损益的科目
  • 出口为什么没有增值税
  • 几个常见的收敛级数
  • SQL server 字符串函数
  • Windows Server 2008如何设置自动获取ip?设置自动获取ip教程
  • freebsd使用
  • windows有哪些好用的软件
  • window8开机
  • 原版windowsxp安装
  • ubuntu12安装教程
  • linux doc
  • Win10 Mobile 10586.306提前上手视频评测
  • linux vmware命令行
  • js 编辑框
  • 全网最全的小说阅读器
  • Nodejs+angularjs结合multiparty实现多图片上传的示例代码
  • Python中str is not callable问题详解及解决办法
  • websocket方法
  • [置顶]游戏名 TentacleLocker
  • js如何封装
  • 黑马程序员培训怎样
  • Python字符串的常用方法
  • 广东税务局查验
  • 核定征收的适用税率
  • 如何查询企业上市情况
  • 北京地税app
  • 请问在哪里可以培训护工
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设