700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > css type选择器 css类选择器用什么做前缀表示 – CSS – 前端 css repeat 不重复 铺满

css type选择器 css类选择器用什么做前缀表示 – CSS – 前端 css repeat 不重复 铺满

时间:2022-07-23 10:27:10

相关推荐

css type选择器 css类选择器用什么做前缀表示 – CSS – 前端 css repeat 不重复 铺满

@ htmlbutton怎么显示网页中间?

用css很方便,比如弄一个id选择器 <style type="type=text/css"> #a{ background-color://这里选择背景颜色 color://这里选择文本颜色 } </style> 然后再把选择器放进去比如<input id=”a”> 弄到网页中间可以把你要的东西放进<div></div>通过这个块来调 建议去学习下css,很简单的东西

@ html中style?

从字面意思上也能看出端倪。style属性是样式,也就是常用的CSS。type属性是组件对象的类型,比如文本框、单选框、复选框、按钮等。

@ 如何设计一个typed?

在平时的工作当中,大家在操作dom的样式的时候,其实操作的就是css的对象模型cssOM,其实在的时候,就发布了一组新的对象模型cssTypeOM,这是一个全新的操作css样式的方式,它的好处有很多,大家一一列举。

在讲解cssOM和cssTypeOM的区别的同时,大家要了解浏览器是如何渲染视图的:

1、解析html后构建dom对象

2、解析css后构建cssOM对象

3、浏览器将dom与css组成渲染树

4、最终浏览器渲染到视图中

cssOM

var width = 100;

document.body.style.width = width + ‘px’;

//需要修改时

document.body.style.width = (width + n(要改变的值)) + ‘px’;

复制代码

这就是cssOM目前存在的问题,它没有办法基于目前的值去做属性的变更,如果想在基础上做变更,你还需要去先获取到当前的值(是个字符串),转换成数字,才能去做递增或者递减的操作,这个样子运算成本很大,还会有可能出现不必要的bug。

typedOM

typedOM的出现,给大家对样式的增删改查操作提供了很大的便利,typedOM不同于cssOM,它不是通过字符串表现形式去修改一个值,而是通过map对象的形式去修改一个值,并且,所有属性的名称直接可以按照css样式的方式去设置,不用写驼峰了。

如何确认大家的浏览器,是否支持typedOM呢?

window.CSS && CSS.number

复制代码

typedOM的操作方式绑定在dom的attributeStyleMap方法上,是一个StylePropertyMap对象,该对象提供了四个方法:

append:

暂时还没有搞明白怎么用,在MDN中的文档中所说的,和实际操作的不同,如果有知道的小伙伴请及时留言,好让偶及时跟进文档

set:

dom.attributeStyleMap.set(prop,val)

//示例

document.body.attributeStyleMap.set(‘width’,’100px’)

//或

document.body.attributeStyleMap.set(‘width’, CSS.px(100))

复制代码

用来设定某一个属性。

clear:

dom.attributeStyleMap.clear()

复制代码

用来清除所有StylePropertyMap中设置的属性,但是并不会清除掉样式表当中设置的属性。

delete:

dom.attributeStyleMap.delete(prop)

复制代码

用来清除某一个指定的属性,但是并不会清除掉样式表当中设置的属性。

在StylePropertyMap的原型链上,还有一个get方法,可以通过传对应的prop,并返回一个对象,对象里面包括两个值,一个是对应的数值,一个是该属性值的单位:

dom.attributeStyleMap.get(‘width’)

//{value: 100, unit: “px”}

复制代码

总结

其实,css typed OM远不止偶文档里面写的这些,还有很多数学操作的方法,便于大家更快的进行计算。

综上所述,大家其实可以看出来一些css typed OM的优势了,这里偶在总结一下:

1、最大限度的降低了通过字符串表现形式去修改css样式,降低了出现此类bug的风险

2、通过css typed OM的运算方法,最短时间最快的去进行样式运算

3、错误处理,如果有接收到错误的css,就会直接抛出错误,方便在最短的时间去定位问题

4、由于dom上的attributeStyleMap方法是一个StylePropertyMap对象,所以方便使用所有的map对象的方法

5、更好的性能!!!由于减少了字符串操作,对于 CSSOM 的操作性能得到了更进一步的提升,由 Tab Akins 提供的测试表明,操作 Typed OM 比直接操作 CSSOM 字符串带来了大约 30% 的速度提升

浏览器兼容

该api在部分浏览器支持方面,可能会比较差,建议如果想提升性能的同时,又需要兼容n种浏览器,请提前写好兼容性代码,保证用户体验。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。