js中style的属性

Posted 2020-08-15

下面这些属性都是通过js的style来设置css。只是整理了一部分，详细的可以参考相应的学习网站，不好的地方欢迎大家拍砖。

 

alignContent :"" 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

alignItems :"" align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

alignSelf :"" align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式

alignmentBaseline :"" 指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。

all :"" 修改所有元素或其父元素的属性为初始值：

animation :"" 动画属性

animationDelay :""

animationDirection :"" 动画方向

animationDuration :"" 动画时长

animationFillMode :"" 属性规定动画在播放之前或之后，其动画效果是否可见

animationIterationCount :"" 属性定义动画的播放次数

animationName :"" animation-name 属性为 @keyframes 动画规定名称。注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

animationPlayState :"" 属性规定动画正在运行还是暂停。

animationTimingFunction :"" 规定动画的速度曲线。速度曲线定义动画从一套 CSS样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

backfaceVisibility :"" 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

background :"" 简写属性在一个声明中设置所有的背景属性

backgroundAttachment :"" 规定背景图像是否固定或者随着页面的其余部分滚动。

backgroundBlendMode :"" 属性定义该元素的背景图片，以及背景色如何混合。

backgroundClip :"" 属性规定背景的绘制区域

backgroundColor :""

backgroundImage :""

backgroundOrigin :"" 规定 background-position 属性相对于什么位置来定位。如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

backgroundPosition :"" 设置背景图像的起始位置

backgroundPositionX :"" 设置背景图像的水平位置

backgroundPositionY :"" 设置背景图像的垂直位置

backgroundRepeat :""

backgroundRepeatX :""

backgroundRepeatY :""

backgroundSize :"" 属性规定背景图像的尺寸

baselineShift :"" 允许相对于父文本内容元素的dominant-baseline重定位dominant-baseline。该切换对象必须是一个下标或上标。

border :""

borderBottom :""

borderBottomColor :""

borderBottomLeftRadius :""

borderBottomRightRadius :""

borderBottomStyle :"" 设置元素下边框的样式。只有当这个值不是 none 时边框才可能出现。

borderBottomWidth :""

borderCollapse :"" 属性设置表格的边框是否被合并为一个单一的边框

borderColor :""

borderImage :""

borderImageOutset :"" 规定边框图像超过边框盒的量

borderImageRepeat :""

borderImageSlice :""

borderImageSource :"" 规定要使用的图像，代替 border-style 属性中设置的边框样式

borderImageWidth :"" 规定图像边框的宽度。

borderLeft :""

borderLeftColor :""

borderLeftStyle :""

borderLeftWidth :""

borderRadius :""

borderRight :""

borderRightColor :""

borderRightStyle :""

borderRightWidth :""

borderSpacing :"" 设置相邻单元格的边框间的距离（仅用于“边框分离”模式

borderStyle :"" 设置元素所有边框的样式，或者单独地为各边设置边框样式

borderTop :""

borderTopColor :""

borderTopLeftRadius :""

borderTopRightRadius :""

borderTopStyle :""

borderTopWidth :""

borderWidth :""

bottom :""

boxShadow :"" 向框添加一个或多个阴影

boxSizing :"" 允许您以特定的方式定义匹配某个区域的特定元素

breakAfter :"" 设置元素后的 page-breaking 行为。尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。应用于：position 值为 relative 或 static 的非浮动块级元素。

breakBefore :""

breakInside :""

bufferedRendering :""

captionSide :"" 设置表格标题的位置

clear :"" 规定元素的哪一侧不允许其他浮动元素

clip :"" 剪裁绝对定位元素

clipPath :"" 剪切路径用于指定可绘制区域。从概念上来说，当绘制的图形超出了剪切路径所指定的区域，超出区域的部分将不会被绘制。

clipRule :""

color :""

colorInterpolation :""

colorInterpolationFilters :""

colorRendering :""

columnCount :"" 规定元素应该被划分的列数。

columnFill :"" 属性规定如何填充列（是否进行协调）

columnGap :"" 将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。

columnRule :"" 规定列之间的宽度、样式和颜色

columnRuleColor :""

columnRuleStyle :""

columnRuleWidth :""

columnSpan :"" 规定元素应横跨多少列

columnWidth :"" 规定列的宽度

columns :"" 属性是一个简写属性，用于设置列宽和列数

contain :""

content :"" 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

counterIncrement :"" 设置某个选取器每次出现的计数器增量。默认增量是 1

counterReset :"" 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。

cssFloat :"" 也就是float属性

cssText :"" innerhtml一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow，提高了页面渲染性能。

cursor :""

cx :""

cy :""

d :""

direction :""

display :""

dominantBaseline :""

emptyCells :"" 设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

fill :""

fillOpacity :"" 指定了填色的不透明度或当前对象的内容物的不透明度

fillRule :"" 属性标识了用来确定路径的哪一侧算是形状内部的算法。对于简单的形状，非相交路径，哪个区域算是“内部”很直观明显；然而对于较复杂的路径，比如说一个路径自身相交，或者一个子路径包围了另一个子路径，这个“内部”的相交就不那么明显了。

filter :"" 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

flex :"" 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flexBasis :"" flex-basis 属性用于设置或检索弹性盒伸缩基准值。。

flexDirection :""

flexFlow :""

flexGrow :""

flexShrink :""

flexWrap :""

float :""

floodColor :""

floodOpacity :""

font :""

fontFamily :""

fontFeatureSettings :""

fontKerning :""

fontSize :"" 字体大小

fontStretch :"" 可对当前的 font-family 进行伸缩变形。

fontStyle :"" 属性定义字体的风格

fontVariant :"" 设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

fontVariantCaps :""

fontVariantLigatures :""

fontVariantNumeric :""

fontWeight :"" 设置文本的粗细

height :""

imageRendering :"" 属性决定浏览器对缩放图像采取的缩放算法.它适用于元素本身和有其他属性的图像.它对非缩放图像没有影响。

isolation :"" 是一个CSS3属性，顾名思意是“隔离”，支持的值除了万年不变的inherit外还包括auto和isolate.

justifyContent :"" 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

left :""

length :0

letterSpacing :"" 属性增加或减少字符间的空白

lightingColor :""

lineHeight :"" 设置行高

listStyle :"" 该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

listStyleImage :"" 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值

listStylePosition :"" 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。

listStyleType :"" 设置列表项标记的类型。参阅：list-style-type 中可能的值。

margin :""

marginBottom :""

marginLeft :""

marginRight :""

marginTop :""

marker :""

markerEnd :""

markerMid :""

markerStart :""

mask :""

maskType :""

maxHeight :"" 最大高度

maxWidth :""

maxZoom :""

minHeight :""

minWidth :""

minZoom :""

mixBlendMode :""

motion :""

motionOffset :""

motionPath :""

motionRotation :""

objectFit :""

objectPosition :""

opacity :""

order :""

orientation :""

orphans :""

outline :""

outlineColor :""

outlineOffset :""

outlineStyle :""

outlineWidth :""

overflow :""

overflowWrap :""

overflowX :""

overflowY :""

padding :""

paddingBottom :""

paddingLeft :""

paddingRight :""

paddingTop :""

page :""

pageBreakAfter :""

pageBreakBefore :""

pageBreakInside :""

paintOrder :""

parentRule :nu
ll
perspective :""

perspectiveOrigin :""

pointerEvents :""

position :""

quotes :""

r :""

resize :""

right :""

rx :""

ry :""

shapeImageThreshold :""

shapeMargin :""

shapeOutside :""

shapeRendering :""

size :""

speak :""

src :""

stopColor :""

stopOpacity :""

stroke :""

strokeDasharray :""

strokeDashoffset :""

strokeLinecap :""

strokeLinejoin :""

strokeMiterlimit :""

strokeOpacity :""

strokeWidth :""

tabSize :""

tableLayout :""

textAlign :""

textAlignLast :""

textAnchor :""

textCombineUpright :""

textDecoration :""

textIndent :""

textOrientation :""

textOverflow :""

textRendering :""

textShadow :""

textSizeAdjust :""

textTransform :""

top :""

touchAction :""

transform :""

transformOrigin :""

transformStyle :""

transition :""

transitionDelay :""

transitionDuration :""

transitionProperty :""

transitionTimingFunction :""

unicodeBidi :""

unicodeRange :""

userZoom :""

vectorEffect :""

verticalAlign :""

visibility :""

webkitAppRegion :""

webkitAppearance :""

webkitBackgroundClip :""

webkitBackgroundOrigin :""

webkitBorderAfter :""

webkitBorderAfterColor :""

webkitBorderAfterStyle :""

webkitBorderAfterWidth :""

webkitBorderBefore :""

webkitBorderBeforeColor :""

webkitBorderBeforeStyle :""

webkitBorderBeforeWidth :""

webkitBorderEnd :""

webkitBorderEndColor :""

webkitBorderEndStyle :""

webkitBorderEndWidth :""

webkitBorderHorizontalSpacing :""

webkitBorderImage :""

webkitBorderStart :""

webkitBorderStartColor :""

webkitBorderStartStyle :""

webkitBorderStartWidth :""

webkitBorderVerticalSpacing :""

webkitBoxAlign :""

webkitBoxDecorationBreak :""

webkitBoxDirection :""

webkitBoxFlex :""

webkitBoxFlexGroup :""

webkitBoxLines :""

webkitBoxOrdinalGroup :""

webkitBoxOrient :""

webkitBoxPack :""

webkitBoxReflect :""

webkitClipPath :""

webkitColumnBreakAfter :""

webkitColumnBreakBefore :""

webkitColumnBreakInside :""

webkitFontSizeDelta :""

webkitFontSmoothing :""

webkitHighlight :""

webkitHyphenateCharacter :""

webkitLineBreak :""

webkitLineClamp :""

webkitLocale :""

webkitLogicalHeight :""

webkitLogicalWidth :""

webkitMarginAfter :""

webkitMarginAfterCollapse :""

webkitMarginBefore :""

webkitMarginBeforeCollapse :""

webkitMarginBottomCollapse :""

webkitMarginCollapse :""

webkitMarginEnd :""

webkitMarginStart :""

webkitMarginTopCollapse :""

webkitMask :""

webkitMaskBoxImage :""

webkitMaskBoxImageOutset :""

webkitMaskBoxImageRepeat :""

webkitMaskBoxImageSlice :""

webkitMaskBoxImageSource :""

webkitMaskBoxImageWidth :""

webkitMaskClip :""

webkitMaskComposite :""

webkitMaskImage :""

webkitMaskOrigin :""

webkitMaskPosition :""

webkitMaskPositionX :""

webkitMaskPositionY :""

webkitMaskRepeat :""

webkitMaskRepeatX :""

webkitMaskRepeatY :""

webkitMaskSize :""

webkitMaxLogicalHeight :""

webkitMaxLogicalWidth :""

webkitMinLogicalHeight :""

webkitMinLogicalWidth :""

webkitPaddingAfter :""

webkitPaddingBefore :""

webkitPaddingEnd :""

webkitPaddingStart :""

webkitPerspectiveOriginX :""

webkitPerspectiveOriginY :""

webkitPrintColorAdjust :""

webkitRtlOrdering :""

webkitRubyPosition :""

webkitTapHighlightColor :""

webkitTextCombine :""

webkitTextDecorationsInEffect :""

webkitTextEmphasis :""

webkitTextEmphasisColor :""

webkitTextEmphasisPosition :""

webkitTextEmphasisStyle :""

webkitTextFillColor :""

webkitTextOrientation :""

webkitTextSecurity :""

webkitTextStroke :""

webkitTextStrokeColor :""

webkitTextStrokeWidth :""

webkitTransformOriginX :""

webkitTransformOriginY :""

webkitTransformOriginZ :""

webkitUserDrag :""

webkitUserModify :""

webkitUserSelect :""

webkitWritingMode :""

whiteSpace :""

widows :""

width :""

willChange :""

wordBreak :""

wordSpacing :""

wordWrap :""

writingMode :""

x :""

y :""

zIndex :""

zoom :""