升级你的CSS技能：原生JS的getComputedStyle和设置样式的方法详解
最编程
2024-01-19 13:27:14
...
说了这么多，接下来将用原生 JS 实现一个小组件，实现 CSS 的 get 与 set，兼容所有浏览器。
完整的组件代码在我的 github 上，戳我直接看代码。
getStyle(elem, style)
对于 CSS 的 set ，对于支持 window.getComputedStyle 的浏览器而言十分简单，只需要直接调用。
|
1
2
3
4
5
6
|
getStyle:
function
(elem, style) {
// 主流浏览器
if
(win.getComputedStyle) {
return
win.getComputedStyle(elem,
null
).getPropertyValue(style);
}
}
|
反之，如果是 IE 浏览器，则有一些坑。
opacity 透明度的设定
在早期的 IE 中要设置透明度的话，有两个方法：
- alpha(opacity=0.5)
- filter:progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = ‘#ccccc’, endColorstr = ‘#ddddd’ );
因此在 IE 环境下，我们需要针对透明度做一些处理。先写一个 IE 下获取透明度的方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// IE 下获取透明度
function
getIEOpacity(elem) {
var
filter =
null
;
// 早期的 IE 中要设置透明度有两个方法：
// 1、alpha(opacity=0)
// 2、filter:progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = ‘#ccccc’, endColorstr = ‘#ddddd’ );
// 利用正则匹配
filter = elem.style.filter.match(/progid:DXImageTransform.Microsoft.Alpha\(.?opacity=(.*).?\)/i) || elem.style.filter.match(/alpha\(opacity=(.*)\)/i);
if
(filter) {
var
value = parseFloat(filter);
if
(!isNaN(value)) {
// 转化为标准结果
return
value ? value / 100 : 0;
}
}
// 透明度的值默认返回 1
return
1;
}
|
float 样式的获取
float 属性是比较重要的一个属性，但是由于 float 是 ECMAScript 的一个保留字。（ECMAScript保留字有哪些？戳这里）
所以在各浏览器中都会有代替的写法，比如说在标准浏览器中为 cssFloat，而在 IE678 中为 styleFloat 。经测试，在标准浏览器中直接使用 getPropertyValue("float") 也可以获取到 float 的值。而 IE678 则不行，所以针对 float ，也需要一个 HACK。
width | height 样式的获取
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。
element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
获取样式的驼峰表示法
上文已经提及了，在IE下使用 currentStyle 要获得属性名的话必须采用驼峰式的写法。
OK，需要 HACK 的点已经提完了。那么在 IE 下，获取样式的写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
getStyle:
function
(elem, style) {
// 主流浏览器
if
(win.getComputedStyle) {
...
// 不支持 getComputedStyle
}
else
{
// IE 下获取透明度
if
(style ==
"opacity"
) {
getIEOpacity(elem);
// IE687 下获取浮动使用 styleFloat
}
else
if
(style ==
"float"
) {
return
elem.currentStyle.getAttribute(
"styleFloat"
);
// 取高宽使用 getBoundingClientRect
}
else
if
((style ==
"width"
|| style ==
"height"
) && (elem.currentStyle[style] ==
"auto"
)) {
var
clientRect = elem.getBoundingClientRect();
return
(style ==
"width"
? clientRect.right - clientRect.left : clientRect.bottom - clientRect.top) +
"px"
;
}
// 其他样式，无需特殊处理
return
elem.currentStyle.getAttribute(camelize(style));
}
}
|
setStyle(elem, style, value)
说完 get ，再说说 setStyle ，相较于getStyle ，setStyle 则便捷很多，因为不管是标准浏览器还是 IE ，都可以使用 element.style.cssText 对元素进行样式的设置。
cssText -- 一种设置 CSS 样式的方法，但是它是一个销毁原样式并重建的过程，这种销毁和重建，会增加浏览器的开销。而且在 IE 中，如果 cssText（假如不为空)，最后一个分号会被删掉，所以我们需要在其中添加的属性前加上一个 ”;” 。
只是在 IE 下的 opacity 需要额外的进行处理。明了易懂，直接贴代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 设置样式
setStyle:
function
(elem, style, value) {
// 如果是设置 opacity ，需要特殊处理
if
(style ==
"opacity"
) {
//IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）
if
(!elem.currentStyle || !elem.currentStyle.hasLayout) {
// 设置 hasLayout=true 的一种方法
elem.style.zoom = 1;
}
// IE678 设置透明度叫 filter ，不是 opacity
style =
"filter"
;
// !!转换为 boolean 类型进行判断
if
(!!window.XDomainRequest) {
value =
"progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="
+ value * 100 +
")"
;
}
else
{
value =
"alpha(opacity="
+ value * 100 +
")"
}
}
// 通用方法
elem.style.cssText +=
';'
+ (style +
":"
+ value);
}
|
到这里，原生 JS 实现的 getStyle 与 setStyle 就实现了，完整的代码可以戳这里查看。可以看到，一个简单接口的背后，都是有涉及了很多方面东西。虽然浏览器兼容性是一个坑，但是爬坑的过程却是我们沉淀自己的最好时机。
jQuery 这样的框架可以帮助我们走的更快，但是毫无疑问，去弄清底层实现，掌握原生 JS 的写法，可以让我们走得更远。
原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
如果本文对你有帮助，请点下推荐，写文章不容易。
最后，本文组件示例的代码贴在 我的github 上。
我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解 。
本文转自ChokCoco博客园博客，原文链接：http://www.cnblogs.com/coco1s/p/5210667.html
上一篇： CSS实现文本两端对齐的方法
推荐阅读
-
41 个下载免费 3D 模型的最佳网站-使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台，也是一个培养新 3D 艺术家的社区。Clara.io 提供+100，000个免费的3D模型，包括OBJ，Blend，STL，FBX，DAE，Babylon.JS，Three.JS格式，用于 Clara.io，Unity 3D，Blender，Sketchup，Cinema 4D，3DS Max和Maya。 使用说明：免费，标准和专业帐户仅供个人使用，如果您需要将 clara.io 用于商业用途，请与销售团队联系。 18. 3DExport 3DExport是一个市场，您可以在其中购买和销售用于CG项目的3D模型，3D打印模型和纹理。它提供15 +不同的3D格式供下载，如3DS MAX（.max），Cinema4D（.c4d），Maya（.mb，.ma），Lightwave（.lwo），Softimage（.xsi），Wavefront OBJ（.obj），Autodesk FBX（.fbx）等。它还提供15种不同的语言！ 使用说明：免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库，允许用户共享和下载SketchUp 3D模型，用于建筑，设计，施工和娱乐！任何人都可以免费制作，修改和重新上传内容到3D仓库，您可以找到任何您能想到的东西，如家具，电子产品，室内产品等。 使用说明：3D Warehouse中的所有模型都是免费的，因此任何人都可以下载文件以用于SketchUp甚至其他软件，如AutoCAD，Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库，我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上，您可以下载高质量的多边形网格3D模型，3D CAD实体对象，纹理，Vray材料，3D作品，CAD图纸等。 使用说明：免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样，它提供免费的3D模型，还包括Vray材料，CAD块，2d和3d纹理集合，无需注册即可免费下载。它是不断更新的，因此您可以查找或请求3DS，MAX，C4D，skp，OBJ，FBX，MTL等格式的模型。 使用说明：所有资源均不允许用于商业用途，否则您将承担责任。 22. Hum3D 自2005年以来，Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间，并制作逼真的3D模型，用于电影，视频游戏，AR应用程序和可视化。所有模型均由首席3D艺术家进行验证，他们检查其是否符合专业要求和最新的3D建模标准。 使用说明：免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样，它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型！它提供3ds，wavefront，bryce，poser，lightwave，md2和unity3d格式的模型。还有一个很棒的纹理集合，可以在您最喜欢的建模和渲染程序中使用。 使用说明：您从这里下载的所有内容都可以免费使用，除非它不能包含在另一个免费的网络或CD收藏中，也不能单独出售。否则，您可以在商业游戏，3D应用程序或渲染作品中使用它。您不必提供信用，但如果您这样做，那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频，您可以找到许多为CGI工作的信息架构设计的模型，所有这些都可以在现实生活中使用。您可以免费下载它们，但是，如果您想一次下载它们，您可以支付 3 到 9 欧元。 使用说明：您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上，您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人！环境CG是使用许多不同的方法和资产类型创建的，例如照片纹理（PBR），贴花（PBR），图集（PBR），照片纹理（普通），物质存档（SBSAR），雕刻画笔，3D模型和地形。您可以在所有项目中*使用它们！ 使用说明：在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品，即使是出于商业目的，也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站：皮克斯，创建于 1993 年，该纹理库包括 128 个重复纹理，现在免费提供。 它包含您来到的纹理，包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明：皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的，您也可以重新混合、调整和构建您的作品，只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载！ 28. 3DXO 即使有近 620 个免费贴纸可供下载，3DXO 也不是最大的资源，但它的内容非常有用，不需要注册。无论是简单的墙壁或地板，还是一些奇怪的小东西，您都需要的纹理都可以在此网站上看到。 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型，并且本网站上的所有内容都是免费的，完全是公共领域！使用我们的模型时无需信用或归属！ 使用说明：为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站，由3D社区的图像促进协会管理，特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术，以及所有正在学习3D可视化的人。 使用说明：您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发，即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场，您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产！ 使用说明：使用权限可能因型号而异。因此，在下载文件之前，请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户，提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的，并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型，包括 OBJ、STL 和 FBX，只需单击下载按钮即可。 使用说明： 要下载模型，只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站，包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型，使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO，设计师只需在网站上搜索他们正在寻找的模型类型，然后下载 STL 格式的文件。 使用说明： 要使用 3DAGOGO，只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型，并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件，可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用，它提供了广泛的工具和功能，可用于创建用于各种目的的3D模型。 该网站易于浏览，您可以找到开始使用FreeCAD的所有必要信息。此外，该网站还提供一系列教程和指南，可帮助您了解 3D 建模的来龙去脉。 使用说明： 要下载模型，请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高，因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型，包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部！该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型，还可以通过分享自己的设计为社区做出贡献。此外，Pinshape 提供了一系列自定义选项，因此您可以调整和调整模型以满足您的特定需求。 使用说明： 要下载模型，请在网站上创建一个帐户，搜索所需的模型，然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型，您可以下载各种格式的模型，例如 STL、OBJ 和 FBX。该网站易于使用，您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合，从日常物品到复杂的机械，以及介于两者之间的一切。该网站的收藏量在不断增长，每天都有新的型号增加。 使用说明： 要下载模型，请在网站上搜索所需的模型，然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型，包括建筑，车辆和角色。无论您需要建筑物，汽车还是人的3D模型，都可以在此网站上找到。 该网站易于浏览，您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息，例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明： 要下载模型，请访问网站，从库中选择所需的模型，然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们，将您的 3D 项目提升到一个新的水平！ 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说，该平台是一个很好的资源。该网站有大量模型可供选择，包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览，以找到适合其项目的完美资源。此外，3DExport 还提供一系列教程和其他 3D 资源，以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明： 要使用 3DExport，只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索，以找到所需的型号。找到喜欢的模型后，只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场，提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产，以便在他们的项目中使用。 使用说明： 创建免费帐户后，您可以浏览社区上传的大量3D模型。当您找到要使用的一个时，只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场，提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型，具有不同的定价计划，允许用户访问一系列模型。 使用说明： 注册免费帐户后，只需浏览3D模型库，选择您喜欢的模型，然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说，这是一个独特的资源。该平台提供了大量3D模型，这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明：
-
升级你的CSS技能：原生JS的getComputedStyle和设置样式的方法详解