可以直接调用(不经过style)的,属于html的属性
需要通过style的,属于CSS的属性
简单说: 属于样式的(CSS), 都需要增加style来使用 而不属于样式,属于节点身份信息或数据信息识别用的,不需要加
这篇文章主要介绍了JS可以控制样式的名称写法,有需要的朋友可以参考一下
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
颜色和背景标签和属性对照
CSS语法
(不区分大小写)
JavaScript语法
(区分大小写)
background
background
background-attachment
backgroundAttachment
background-color
backgroundColor
background-image
backgroundImage
background-position
backgroundPosition
background-repeat
backgroundRepeat
color
color
样式标签和属性对照
CSS语法
(不区分大小写)
JavaScript语法
(区分大小写)
display
display
list-style-type
listStyleType
list-style-image
listStyleImage
list-style-position
listStylePosition
list-style
listStyle
white-space
whiteSpace
文字样式标签和属性对照
CSS语法
(不区分大小写)
JavaScript语法
(区分大小写)
font
font
font-family
fontFamily
font-size
fontSize
font-style
fontStyle
font-variant
fontVariant
font-weight
fontWeight
文本标签和属性对照
CSS语法
(不区分大小写)
JavaScript语法
(区分大小写)
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
JS里添加样式的方法:
1、首先,要创建标签,使用documentcreateElement函数,如图创建div标签。使用其className设置class,id设置id,style设置样式。
2、样式的设置也可以分项进行。如图是分项设置其left,top,display,position,width几个样式。
3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然,也可以分项分层添加标签。
4、设置好标签(如图是div标签,变量名box),使用documentbodyappendChild添加标签到body当中。
5、标签添加以后,依然可以修改样式,如图是使用documentgetElementById方法根据id获取标签,修改style。
6、标签添加以后,也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。
不知道你具体是要修改i的样式还是移除class,所以都给你说了吧
$('#defo')addClass()、$('#defo')removeClass()、$('#defo')toggleClass()、$('#defo')css()
一般都是用id去获取dom节点,因为id相对唯一,如果是要改变多个就用$('fa')[Methods]
不太明白你的意思,不知道这是不是你想问的问题解答:
getstyle如果是针对浏览器提供的getcomputedstyle,那可以找出某个样式的具体值,标准的js不能读取到写在class里的样式的,如果需要针对指定的样式如高度为某个数值的元素进行设置时,js就可以通过这个方法找出需要修改的元素。
这个其实不难,主要是获取当前的标签,并添加样式,然后给其他的标签的样式设为无就可以了代码如下:
<!doctype html><html>
<head>
<title>js获取二级菜单p元素</title>
<style>
ps{width:100px; height:45px; background:#fc0; color:#000;}
</style>
<script>
windowonload=function(){
var spans=documentgetElementById("qm-p");//获取span标签,这样方便下一步获
取二级菜单
var menuP=spansgetElementsByTagName("p");//通过getElementsByTagName标签获
取p标签
for(i=0;i<menuPlength;i++){ //遍历二级菜单
menuP[i]onclick=function(){
for(j=0;j<menuPlength;j++){
menuP[j]className=""; //给其他标签样式设为无
}
thisclassName="ps";//给当前标签添加样式
}
}
}
</script>
</head>
<body>
<li ><a href="javascript:;" id="mine-qm" >启蒙</a>
<span id="qm-p">
<p>爱的世界</p>
<p>中文启蒙</p>
<p>美猴王汉语·幼儿</p>
</span>
</li>
</body>
</html>
希望可以帮到你,还有什么疑问随时追问
如果写在 样式表 里面, 用stylewidth拿不到宽度, 但是通过 elementoffsetWidth 可以获取宽度
写在行内的就可以直接用stylewidth来获取
需要注意的是宽高在设定padding的时候是不同的:
对于普通元素一般第二个参数设置为null就可以了
此方法适用于通用样式表获取样式值
盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10
|-5| = 5
这三个函数都是 数学函数
Math
比如说 consolelog(Mathceil(101)) 结果 是 2
consolelog(Mathceil(19)) 结果 2
consolelog(Mathceil(-13)) 结果 是 -1
比如说 consolelog(Mathfloor(101)) 结果 是 1
consolelog(Mathfloor(19)) 结果 1
consolelog(Mathfloor(-13)) 结果 是 -2
consolelog(Mathround(101)) 结果 是 1
consolelog(Mathround(19)) 结果 是 2
匀速动画的原理: 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
( 缺陷:只能水平方向!随后的“封装运动框架单个属性会进一步改进” )
我们访问得到css 属性,比较常用的有两种:
点语法可以得到 width 属性 和 top属性 带有单位的 。 100px
但是这个语法有非常大的 缺陷, 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
boxstylew
最大的优点 : 可以给属性传递参数
我们想要获得css 的样式, boxstyleleft 和 boxstylebackgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办?
核心: 我们怎么才能得到内嵌或者外链的样式呢?
外部(使用<link>)和内嵌(使用<style>)样式表中的样式(ie和opera)
两个选项是必须的, 没有伪类 用 null 替代
我们这个元素里面的属性很多, left top width ===
我们想要某个属性, 就应该 返回该属性,所有继续封装 返回当前样式的 函数。
千万要记得 每个 的意思 : 那是相当重要
flag在js中一般作为开关,进行判断。
等动画执行完毕再去执行的函数 回调函数
我们怎么知道动画就执行完毕了呢?
很简单 当定时器停止了。 动画就结束了
案例源码:
in运算符也是一个二元运算符,但是对运算符左右两个 *** 作数的要求比较严格。in运算符要求第1个(左边的) *** 作数必须是字符串类型或可以转换为字符串类型的其他类型,而第2个(右边的) *** 作数必须是数组或对象。只有第1个 *** 作数的值是第2个 *** 作数的属性名,才会返回true,否则返回false
案例源码:
链接: > 密码:7fv8
以上就是关于js获得或创建标签的样式时,有的需要加style,有的不需要加全部的内容,包括:js获得或创建标签的样式时,有的需要加style,有的不需要加、JS可以控制样式的名称写法一览、JS里添加样式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)