JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。
例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}.
下面就是JS 控制CSS样式表的语法对照:
CSS语法 (不区分大小写) | JavaScript语法 (区分大小写) |
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border-color | borderColor |
border-left | borderLeft |
border-left-color | borderLeftColor |
border-left-style | borderLeftStyle |
border-left-width | borderLeftWidth |
border-right | borderRight |
border-right-color | borderRightColor |
border-right-style | borderRightStyle |
border-right-width | borderRightWidth |
border-style | borderStyle |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
border-width | borderWidth |
clear | clear |
float | floatStyle |
margin | margin |
margin-bottom | marginBottom |
margin-left | marginLeft |
margin-right | marginRight |
margin-top | marginTop |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-position | backgroundPosition |
background-repeat | backgroundRepeat |
color | color |
display | display |
list-style-type | listStyleType |
list-style-image | listStyleImage |
list-style-position | listStylePosition |
list-style | listStyle |
white-space | whiteSpace |
font | font |
font-family | fontFamily |
font-size | fontSize |
font-style | fontStyle |
font-variant | fontVariant |
font-weight | fontWeight |
letter-spacing | letterSpacing |
line-break | lineBreak |
line-height | lineHeight |
text-align | textAlign |
text-decoration | textDecoration |
text-indent | textIndent |
text-justify | textJustify |
text-transform | textTransform |
vertical-align | verticalAlign |
转载于:https://www.cnblogs.com/mrcoke/articles/2415416.html
JS控制CSS样式语法对照相关推荐
- 使用js控制css样式
使用js控制css样式 js拥有很多强大的功能,这里就说一下它的一个控制css最基础的功能,代码如下: <!DOCTYPE html> <html lang="en&quo ...
- html js 设置样式,原生js设置样式 笔记:JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性 用J ...
- Emmet语法(快速生成HTML结构语法、快速生成CSS样式语法)
1. 快速生成HTML结构语法 生成标签直接输入标签名按tab键即可 比如div然后tab键,就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 ...
- 快速生成CSS样式语法(HTML、CSS)
快速生成CSS样式语法(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- css view a if属性,uni-app学习笔记(2)view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式 当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- 通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值 修改某一元素的class名,使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <h ...
- JS设置CSS样式的几种方式(js设置!important)
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 ...
最新文章
- 增加了一行代码,让我们提高了3000%的性能
- Oracle Hint 之 Parallel
- 程序员避免颈椎病攻略
- aswing学习笔记3-在JPanel中,如何将.png格式的图片设置为背景?
- 用实例分析H264 RTP payload
- java 如何将数字倒置_每日一个小算法之整数中每位上的数字进行反转 20190810
- spring boot报FileSizeLimitExceededException异常的解决方法
- sql中如何统计各种零件的总数量_数据蒋堂 | SQL是描述性语言?
- (16)FPGA面试技能提升篇(Python)
- Proxy 简答实现 ViewModel 和 View
- myeclipse堆栈溢出
- c9500堆叠配置_用C ++堆叠
- 如何做web程序权限管理
- mac如何禁止adobe creative cloud开机自启?
- go对get、post请求封装
- ubunt Linux nginx,linux ubuntu系统安装nginx教程
- JAVA基础【刘意】27天全集【Day02小结】
- python数学实验与建模pdf_Python数学实验与建模(4)
- echarts迁徙图 vue_如何快速在Vue中实现流向图或迁徙图?
- ChucK初步(5)
热门文章
- CVPR2021 FGVC8植物病理识别挑战赛,冠军方案解读
- 精度76.16%,速度是SlowFast的4.5倍,视频理解模型PP-TSM重磅发布
- ​使用高斯过程回归指导网络轻量化
- 目标检测二十年间那些事儿——加速与优化
- 百万奖池大赛 | 交通事件、医学病理、违法广告检测等,2020首届江苏大数据开发与应用大赛启动...
- axios php文件登录,JWT实战:使用axios+PHP实现登录认证
- 今日头条面试题:生成随机数(根据rand5()生成rand7())
- 机器学习(八)支持向量机svm终结篇
- qn模块java脚本_Qn271 对于网络编程 反射 IO 线程的一些一本入门程序 多多联系会加快 速度 WinSock-NDIS 269万源代码下载- www.pudn.com...
- 等产量曲线中r_微观经济学第四章练习题