javascript - 检索 CSSStyleDeclaration 原生 Javascript 对象的键
问题描述
我想检索可以设置为 dom 对象的所有可用键/样式的列表:CSSStyleDeclaration 对象。如果我在 chrome 中运行这行代码
console.log(Object.keys(document.querySelector('.class1').style));
我得到了预期的结果:
(517) ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "all", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backdropFilter", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundRepeatX", "backgroundRepeatY", "backgroundSize", "baselineShift", "blockSize", "border", "borderBlockEnd", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStart", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBottom", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderColor", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderInlineEnd", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStart", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderLeft", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "bufferedRendering", "captionSide", "caretColor", "clear", "clip", "clipPath", "clipRule", "color", "colorInterpolation", "colorInterpolationFilters", "colorRendering", "columnCount", "columnFill", …]
但是在 Firefox 中我得到一个空数组,而在 Edge 中我得到一个只有 1 个项目的数组
[object Array]: ["WebkitAnimation"]
0: "WebkitAnimation"
length: 1
我的单行代码有什么问题?
解决方案
该Window.getComputedStyle()
方法返回一个包含元素所有 CSS 属性值的对象。使用以下
let compStyles = window.getComputedStyle(document.querySelector('.class1'));
console.log(Object.values(compStyles));
推荐阅读
- javascript - 将数据从节点发送到python并打印
- python - 迷宫:寻找从起点到终点的最短路径
- plugins - 无法通过 Leiningen 插件在项目中获取可检测的符号
- python - 无监督学习 python:x,y,z 运动聚类
- c++ - C++ 字母顺序字符串数组
- java - 使单选按钮在 GridLayout 中彼此相邻显示
- delphi - 创建使用接口的 Delphi TForm 时是否需要实现 IInterface 方法
- hive - 同一查询中的计算列 - Spark , Hive
- c# - Unity Canvas“随屏幕大小缩放”使元素在较低分辨率下不可见
- javascript - Firebase 身份验证 - 自定义身份验证