javascript 操作 css

javascript学习——CSS 操作总结 CSSStyleDeclaration 接口用来操作元素的样式。三个地方部署了这个接口。元素节点的style属性(CSSStyle实例的style属性的返回值CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性,不过,连词号需要变成骆驼拼写法。上面代码中,style属性的值是一个 CSSStyleDeclaration 实例。这个对象所包含的属性与 CSS 规则一一对应,但是名字需要改写,比如写成。 阅读详情

使用方法
元素中添加 onmouseover="imageOver(this)"
对应函数的写法
function imageOver(e) {
          e.style.border="1px solid red";       }   
JavaScript CSS Style属性对照表
盒子标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
floatfloatStyle
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
 
颜色和背景标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
colorcolor
 
样式标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
displaydisplay
list-style-typelistStyleType
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-stylelistStyle
white-spacewhiteSpace
 
文字样式标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
fontfont
font-familyfontFamily
font-sizefontSize
font-stylefontStyle
font-variantfontVariant
font-weightfontWeight
 
文本标签和属性对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写)
letter-spacingletterSpacing
line-breaklineBreak
line-heightlineHeight
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-justifytextJustify
text-transformtextTransform
vertical-alignverticalAlign

 

斩!JavaScript语法进阶(DOM操作、定时器函数、CSS样式改变) 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。当网页被加载时,浏览器将网页转为一个DOM,并用JS进行各种操作。比如:改变页面中的HTML 元素及其属性,改变页面中的,对页面中的事件做出响应。可以这么理解,DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。如图理解:浏览器会根据 DOM 模型,将结构化文档HTML解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。 阅读详情

相关推荐

javaScript之鼠标操作(onmouseover)

javaScript之鼠标操作(onmouseover)<input type="checkbox" onmouseover="alert('a')" />onmouseover:当鼠标移动到checkbox这个元素上时,会发生““里面的指令 alert(‘a’):弹出提示窗,内容为a<input type="checkbox" onmouseover="document.getElementBy

可芭乐的博客 2420

国产FPGA逆袭!深度评测复旦微RFVU3P5G核心板在相控阵雷达中的表现

本文深度评测了复旦微RFVU3P5G核心板在相控阵雷达中的实战表现。该核心板凭借射频直采架构、高采样率ADC/DAC及丰富的DSP资源,在多通道同步精度、动态范围及系统稳定性等关键指标上表现出色,展现了国产FPGA在高端雷达应用中的硬核实力与供应链自主价值。

b0c1d2的博客 724

asp.net2.0:扩展ImageButton控件定制自己需要的功能

   虽然现在网上可以找到n多第三方控件,可我总是看那些单独的dll不爽,在微软提供的标准控件无法满足实际需求时,大多采取扩展标准控件定制个性功能的方法解决,本文描述了给ImageButton控件增加鼠标悬浮变换图像功能的实现步骤。——cncxz(虫虫) 2006-3-22  安装上vs.net2005之后,就发现asp.net2.0中的主题和外观功能用起来比较方便,例如ImageButton控件

gsyst520的专栏 724

ROS学习笔记之——无人机PID调参过程记录

For cooperaive inquiries, please visit the website:guanweipeng.com

gwpscut的博客 6829

在 Windows 10 中通过 WSL2 安装 vLLM 部署本地大模型的方法和步骤

通过 WSL2 在 Windows 10 中部署 vLLM 的核心优势是兼顾 Windows 生态与 Linux 环境的 GPU 加速能力,适合需要在 Windows 下开发但依赖 vLLM 高性能推理的场景。相比原生 Windows 部署(Ollama 等工具),该方案性能更优(接近原生 Ubuntu),且支持更大模型和量化优化。若追求极致性能,建议直接使用 Ubuntu 系统;若必须依赖 Windows 工具链,WSL2 + vLLM 是当前最优选择。

当 AI 开始写文章、绘星空,甚至预测未来,您还在旁观吗?这里将剖开人工智能的思考逻辑,拆解 AI 创作的底层密码,也聊聊人工智能里的人文温度。每篇都有让你拍案的细节,快来解锁 AI 时代的神奇世界! 3754

javascript onmouseover、onmouseout练习代码

<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> </head> <body> <div id="mouse" style="background-color: #33cccc;width: 200px;height: 200px;" onmouseover='over(this)' onmouseout='out(this)'>请把鼠标放上去</div

欢迎光临雨落星辰的博客 412

支付宝域名如何加入白名单(扫码老是弹窗)

支付宝扫码之后,遇到非支付宝官方网页,请确认是否继续访问弹窗,问题解决办法。本章教程提供解决办法,亲测有效。

猿小白的博客 9196

Java table逐行变色,点击变色

table table { border-top:1px solid black; border-left:1px solid black; cursor:default; } td { border-bottom:1px solid black; border-right:1px solid bl

兰染 2044

10. 重磅!Spring AI 1.0 正式发布,Java 开发者的 AI神器!

重磅!Spring AI 1.0 正式发布,Java 开发者的 AI神器! 全网最详细的Spring AI 文章,每章都会提供代码入口,让你更容易得入门和理解Spring AI 相关概念,直接节约你百分之六十的学习成本时间。

gorgor在码农 1066

Orange3实战教程:文本挖掘---主题建模

主题建模通过LDA、LSI或HDP算法分析文档集合,自动发现隐含主题结构。组件输入为文档语料库,输出包括带主题权重的语料库、主题词分布及完整主题数据。不同算法特性各异:LSI允许正负权重但解释性较弱,LDA更易解释,HDP参数复杂需谨慎设置。结果可结合词云、热力图等可视化工具分析主题特征及分布。示例显示如何通过预处理文本、选择算法(如提取5个LDA主题),并利用MDS和箱线图探索主题间关系及关键词分布。

err2008的专栏 365

JavaScript 如何使用JS操作CSS

家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用JS操作css,大家有不懂得可以私信我,或者在下方评论噢,现在就让我带你们进入知识的海洋中。 一.什么是css? Cascading Style Sheets 通常称为CSS样式表或层叠样式表(级联样式表) CSS用于控制网页的外观(HTML是用于控制网页结构的,JS是控制网页的行为) Css让界面变得更加美观 二.如何使用JS操作CSS 1.直接操作style...

m0_65725031的博客 1万+

17|CI/CD 集成与质量门禁:让精准测试进入发布流水线

本文讲解精准测试如何接入 CI/CD 流水线,并通过质量门禁辅助发布决策。测试开发工程师。Java 后端开发工程师。质量平台 / DevOps 平台建设者。想了解精准测试落地方法的技术负责人。

专注 AI 精准测试平台实战落地,分享从代码 Diff 到回归决策的完整工程闭环。主张“先建数据链路,再上 AI 智能”,让测试从“靠经验”走向“基于风险”。 67

JS 之 动态操作 css

今天跟大家分享下JS 之 动态操作css的知识。 前言 JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API,还有一组不太为人所知的 CSS API。 由于JSX和无数JS框架的出现,使通过JS API与DOM交互的想法真正流行起来,但是在...

Happy Simon 221

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

javascript的js操作css

一.基本语法    var,if,switch,for,while,do while,break,isNaN,parseInt,parseFloat 二.Dom模型    window          (setInterval(设置定时器),clearInterval(清除定时器),alert,confirm(弹出对话框),parent(window的父元素),opener,window

ch_平凡~~生活! 702

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

9.1 JavaScript 操作css

场景推荐方式切换状态(如 hover、active、隐藏/显示)✅动态计算的样式(如位置、尺寸)⚠️(但尽量用 CSS 变量或 transform)读取元素当前样式✅批量应用复杂样式✅ 动态添加 class + CSS动画/过渡✅ 用 class 触发 CSStransition或animation❌ 避免:大量使用,会导致样式散落在 JS 中,难以维护。问题答案能删除 CSS 样式吗?✅ 能有deleteRule吗?✅ 有,能按选择器删除吗?

chxii的专栏 1734

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

css 横线_JS 之 动态操作 css

阅读本文约需要6分钟大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务!1、长期为你提供最优质的学习资源!2、给你解决技术问题!3、每天在朋友圈里分享优质的技术文章!4、每周1、3、5送纸质书籍免费送给大家,每年至少送书800本书!5、为大家推荐靠谱的就业单位!请注意!我上面说的5点全部都是免费的!全网你应该找不到第二家吧!当然,大家在我私人微信...

weixin_39845221的博客 315

javaScript中操作CSS样式!

这是我记录学习的地方,帮助我回忆学过的东西,方便我以后查找! 通过JS来操作CSS样式是非常又需要的,一起来学习吧。 语法:object.style.样式名= 样式的值 例如: &amp;lt;!Document html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meat charset=&quot; UTF-8&quot; &amp;gt; &amp;lt;meat name =&am

qq_42674779的博客 470

通过JavaScript来操作CSS

通过JavaScript来操作CSS 通过style属性来修改CSS CSS的优先级:内联样式>Id选择器>类选择器>标签选择器 格式:标签对象.style.CSS属性=“值”; 注意:在JS中CSS属性的写法与CSS中属性的写法不一样 CSS中属性的多个单词使用 - 隔开 JS中使用驼峰命名法:去除小横线,第二个单词首字母大写(一个单词的不变) 如: CSS JS font-size

zyg238940的博客 254

JS对CSS的操作

JS对CSS的操作

qq_48516121的博客 315

使用JS操作CSS

如何使用js操作css

SqlloveSyn的博客 2947

JavaScript学习之旅——JS操作CSS

CSS 优先规则: 优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 1、通过JSDOM对象的style属性修改CSS样式 在JavaScript中是通过DOM对象的style属性来修改CSS样式中的值。例如: //通过DOM对象获取到对应的标签 let card = document.querySelector(".card"); //给标签添加监听事件,通过其中的回调函数修改CSS的值 card.addE

XBCMZDQP的博客 251

js中用css定义盒子,JavaScript如何操作css

原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子代码如下:js控制cssdiv{background:pink; width:100px; height:100px; }//方式一://查找到i...

weixin_39910963的博客 370

JS——操作CSS样式

页面往往是动态变化的,我们经常需要在脚本里对元素的样式进行操作,刚学习js的时候大家都知道通过style属性设置css样式相关的属性,但有时候也想先获取样式,结果发现通过style取到的值是空,这就需要我们对这些概念足够熟练。 一、访问行内样式: css样式包括三种: 外部样式、内部样式、行内样式。 这个style对象包含通过HTML的style属性设置的所有CSS样式信息,但不包含祥式表中的...

honeygirl_的博客 1613

HTML怎么用js填充颜色,如何使用JavaScript操作CSS颜色

在学习如何使用JavaScript操作CSS颜色之前,我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种,最为常见的模型有:RGB和HSL。我们先来看一下这两种颜色模式。颜色模式RGBRGB是red、green和blue三个单词首字母的缩写,其由三个数字组成,每个数字表示其各自颜色的光在最终颜色中包含多少。在CSS中,这些数字都在0~255之间,可以作为CSS的rgb函数的参数...

weixin_32232809的博客 1119
上一篇: set map list的区别
下一篇: javascript的tab标签
charles_mo
博客等级 码龄16年 5粉丝 96原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值