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

  • oppo手机下载的软件不在桌面上怎么办(oppo手机下载的视频怎么找不到呢)

    oppo手机下载的软件不在桌面上怎么办(oppo手机下载的视频怎么找不到呢)

  • 台式电脑大小写字母如何切换(台式电脑大小写怎么分辨)

    台式电脑大小写字母如何切换(台式电脑大小写怎么分辨)

  • 华为mate30怎么打开外置U盘(华为mate30怎么打开volte开关)

    华为mate30怎么打开外置U盘(华为mate30怎么打开volte开关)

  • 爱奇艺视频在哪里(爱奇艺视频在哪买便宜)

    爱奇艺视频在哪里(爱奇艺视频在哪买便宜)

  • ncr18650b是什么电池(ncr18650a)

    ncr18650b是什么电池(ncr18650a)

  • 音乐包和vip区别(音乐包和vip区别网易云)

    音乐包和vip区别(音乐包和vip区别网易云)

  • 小米8青春版屏幕刷新率(小米8青春版屏幕比例)

    小米8青春版屏幕刷新率(小米8青春版屏幕比例)

  • 5g频段的wifi真的无法穿墙吗(5g 频段 wifi)

    5g频段的wifi真的无法穿墙吗(5g 频段 wifi)

  • 微信橱窗怎么开通(微信商品橱窗开通需要什么条件)

    微信橱窗怎么开通(微信商品橱窗开通需要什么条件)

  • 淘宝会员名可以给别人吗(淘宝会员名可以随便告诉别人吗)

    淘宝会员名可以给别人吗(淘宝会员名可以随便告诉别人吗)

  • 荣耀v30支持人脸识别吗(荣耀v30人脸识别是3d吗)

    荣耀v30支持人脸识别吗(荣耀v30人脸识别是3d吗)

  • 支付宝删除好友后对方还有我吗(支付宝删除好友还能转账吗)

    支付宝删除好友后对方还有我吗(支付宝删除好友还能转账吗)

  • 充电口被戳进去了怎么办(充电口被戳进去怎么修复)

    充电口被戳进去了怎么办(充电口被戳进去怎么修复)

  • 虎牙直播怎么竞猜(虎牙主播怎样开通竞猜权限)

    虎牙直播怎么竞猜(虎牙主播怎样开通竞猜权限)

  • 华为手机在哪插耳机(华为手机在哪插手机卡)

    华为手机在哪插耳机(华为手机在哪插手机卡)

  • 华为mate30带红外线吗(华为荣耀80有红外线功能吗)

    华为mate30带红外线吗(华为荣耀80有红外线功能吗)

  • 苹果11手机天气怎么定位(苹果11手机天气预报怎么设置)

    苹果11手机天气怎么定位(苹果11手机天气预报怎么设置)

  • oppok5支持nfc吗(oppok5能不能支持5g)

    oppok5支持nfc吗(oppok5能不能支持5g)

  • 探探上的人可以见面吗(探探上可以找人吗)

    探探上的人可以见面吗(探探上可以找人吗)

  • 瀑布屏是啥(瀑布屏有什么好处)

    瀑布屏是啥(瀑布屏有什么好处)

  • 微信绑了信用卡后可以扫码消费吗(微信绑了信用卡怎么不能用)

    微信绑了信用卡后可以扫码消费吗(微信绑了信用卡怎么不能用)

  • airpods打电话声音小(airpods打电话声音小对方听不到)

    airpods打电话声音小(airpods打电话声音小对方听不到)

  • 什么是bios设置 bios与cmos的设置在概念上的区分与联系(什么是BIOS设置界面)

    什么是bios设置 bios与cmos的设置在概念上的区分与联系(什么是BIOS设置界面)

  • 远程桌面连接失败(远程桌面连接失败了)

    远程桌面连接失败(远程桌面连接失败了)

  • UNS.exe是什么进程?UNS.exe会是病毒吗?UNS.exe程序文件介绍(un system)

    UNS.exe是什么进程?UNS.exe会是病毒吗?UNS.exe程序文件介绍(un system)

  • 【解决问题】Vue 项目中安装依赖 npm install 一直报错(vue项目难点及解决方法)

    【解决问题】Vue 项目中安装依赖 npm install 一直报错(vue项目难点及解决方法)

  • ChatGPT 背后的“功臣”——RLHF 技术详解(chatGPT背后的真正逻辑)

    ChatGPT 背后的“功臣”——RLHF 技术详解(chatGPT背后的真正逻辑)

  • 摊薄净资产收益率是什么意思
  • 应纳税额减征额包括哪些内容
  • 待认证进项税额是什么情况下用的
  • 递延所得税费用在资产负债表哪一项
  • 债权人豁免债务的账务
  • 返利销售增值税
  • 货代企业都需要交什么税
  • 支付境外软件服务怎么用
  • 土地增值税计税价格
  • 外贸企业出口采购流程
  • 电子承兑汇票转让怎么操作
  • 摊销租金是什么意思
  • 税收返还怎么做会计分录
  • 建筑材料资源利用
  • 企业资产业务收购税务处理怎么做?
  • 电子发票有发票代码吗
  • 正回购和逆回购的区别
  • 技术服务收入和产品服务收入举个例子
  • 两地取得工资个税怎么交
  • 政府授权国企为基建项目建设单位
  • quickdcf.exe - quickdcf是什么进程 作用是什么
  • 新准则交易性金融资产
  • services.exe是什么服务
  • 公司收到预付款怎么用处去
  • 工地事故赔付
  • 生产企业出口退税全部流程
  • 员工出差机票计入什么科目
  • 前端页面设计
  • 微信小程序下拉菜单怎么做
  • vue路由详解
  • php实现链式操作实验报告
  • 消费积分如何做账
  • 租赁汽车折旧年限怎么算
  • 买一赠一的销售方式
  • 企业的管理费用占比
  • 预收帐款
  • 现金返利的会计分录
  • 借支单是会计算做还是出纳做
  • 房租增值税专用发票可以抵扣吗
  • 费用报销票据规范要求
  • 委托加工合同如何签订
  • 个人独资企业个体工商户的区别
  • 建筑公司需要什么人员
  • 应付利息怎么记账
  • 应发和实发工资账务处理
  • 如何做好企业安全生产工作
  • sql server 2012r2
  • sql server数据库中的null(空值)
  • windows下mysql安装配置教程
  • innodb_index_stats导入备份数据时报错表主键冲突的解决方法
  • mysql 5.7.13 winx64安装配置方法图文教程(win10)
  • 便签windows
  • 2021win10激活
  • 将哪一linux文件系统引入
  • win8.1系统安装教程
  • win8 更改电脑设置
  • 毕竟近义词语
  • linux常见的启动方式
  • 一个简单的灵魂福楼拜
  • Android开发中遇到的问题及解决方案
  • vue路由跳转的钩子函数什么时候会用到
  • bat批处理命令大全
  • python jsondecodeerror异常捕获
  • shell脚本查找
  • win10 python环境
  • 狗刨怎么学
  • js中new操作符工作原理
  • 安卓手机都这样
  • 圣诞树代码html
  • 信息流广告与原生广告的区别
  • js对象用法
  • android的事件处理机制
  • 广东省国家税务总局稽查局局长
  • 长春税务局电话举报
  • 个人自行申报纳税
  • 税务局有事业单位编制吗
  • 税务局组织收入存在的问题
  • 个人所得税网上报税流程
  • 省税务局属于什么级别
  • 小规模纳税人租赁费税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设