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

  • 所得税费用怎么算分录
  • 股票初始计量后按新金融准则计入哪个科目
  • 停车场自助缴费系统
  • 取得的增值税专用发票能否盖付讫章
  • 小规模纳税人取的专票能抵扣吗
  • 收到销售退回时应当冲减
  • 培训发生的差旅费的会计准则有哪些
  • 个人代垫公司费用微信转账如何报销
  • 建筑企业跨地区
  • 国际贷款平台
  • 国家税务局通用定额发票查询
  • 教育费附加计算公式
  • 个人房屋租赁税率2023年
  • 国税定额发票有效期是多长时间
  • 小微企业免征增值税优惠
  • 自来水企业应该交什么税
  • 高杠杆资金是什么意思
  • 出纳现金日记账怎么记账
  • 小规模建筑工程
  • 企业所得税发票虚假成本调减当年的吗
  • 周围的材料分为哪几类
  • 高新技术研发的会议有哪些
  • 付佣金怎么做分录
  • 其他现代服务业是什么
  • 在线网速测试工具
  • php封装composer包
  • 装电脑系统的方法和步骤
  • win10电脑记事本在哪
  • 文竹发黄怎么挽救?
  • 出售债券税费处理方法
  • 分红财务做账
  • 所得税税前扣除的费用有哪些
  • 居民企业境外所得税率
  • 解聘员工补偿金能拖欠吗
  • 企业弥补亏损明细表
  • 中科大ustc-guest
  • php java c#
  • 个体户对公账户的钱怎么取出来
  • 卡格拉河
  • ChatGPT-Next-Web:Vercel 和 Cloudflare 的快速部署
  • 为什么我会选择那个对我一般的男人结婚
  • php获取访问者信息
  • 进项抵销项的会计分录
  • 使用筷子就餐会不会传染乙肝病毒
  • java的基本
  • 进料余料结转 报关单
  • curl抓包
  • 预付款为什么不扣质保金呢
  • 暂存的凭证是怎么做的
  • 使用XQuery查询DB2 XML数据
  • sql优化的方法及思路
  • sqlserver导入导出数据库
  • 一般纳税人发生应税销售行为向购买方收取
  • 增值税留抵税款制度
  • 银行存款支付业务招待费
  • 租出的固定资产
  • 支付结算办法是部门规章吗
  • 信用卡什么情况下会被冻结
  • 坏账准备的余额百分比法
  • 企业的其他应付款增加了说明什么
  • 固定资产折旧方法不考虑净残值
  • windows取消ctrl+alt+del
  • ubuntu安装指南
  • windows7创建新桌面
  • win7更改电脑设置在哪里
  • win7网上邻居怎么共享文件数据
  • win8系统开机怎么进入桌面
  • cocos2d怎么用
  • windows定时计划
  • 完美解决gvim的菜单乱码问题
  • node.js ajax
  • javascript入门教程
  • python3.5怎么保存
  • js中遍历数组的方法
  • jQuery给div,Span, a ,button, radio 赋值与取值
  • 广东省电子居住证怎么查看
  • 河北省国家税务局电子税务局官网入口
  • 开票金额有限额吗
  • 水厂管理经验
  • 税务实名认证如何操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设