js获得或创建标签的样式时,有的需要加style,有的不需要加

js获得或创建标签的样式时,有的需要加style,有的不需要加,第1张

可以直接调用(不经过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里添加样式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9451037.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存