Convertendo nomes de propriedades css para javascript
Video: Online kurz Webrebel: HTML a CSS, Responzívny dizajn, javascript a jQuery
Conteúdo
Você pode converter nomes de propriedades CSS para javascript. No entanto, existem algumas coisas que você deve se lembrar, se você está pensando em fazer isso. Ao mudar estilos com javascript, existem algumas regras simples:
Video: How to Create a Web Preload Screen | HTML Tutorials | CSS Tutorials | JS Tutorials
Se a propriedade CSS é uma palavra (como altura), Que permanece como está.
Se a propriedade CSS é mais do que uma palavra, separados por traços, ele é convertido em camelCase.
Aqui é uma referência completa das conversões de nome de propriedade de CSS para javascript.
CSS Property | javascript Reference |
---|---|
fundo | fundo |
background-attachment | backgroundAttachment |
cor de fundo | cor de fundo |
imagem de fundo | imagem de fundo |
-fundo posição | backgroundPosition |
fundo de repetição | fundo de repetição |
fronteira | fronteira |
-fronteira inferior | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
-fronteira inferior largura | borderBottomWidth |
Cor da borda | Cor da borda |
border-left | borderLeft |
border-left; cor | borderLeftColor |
border-left; estilo | borderLeftStyle |
fronteira esquerda; largura | borderLeftWidth |
border-right | borderRight |
border-right; cor | borderRightColor |
border-right; estilo | borderRightStyle |
-fronteira direita; largura | borderRightWidth |
estilo de borda | estilo de borda |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
fronteira de largura | borderWidth |
Claro | Claro |
grampo | grampo |
cor | cor |
cursor | cursor |
exibição | exibição |
filtro | filtro |
flutuador | cssFlutuador |
Fonte | Fonte |
família de fontes | família de fontes |
tamanho da fonte | tamanho da fonte |
font-variante | fontVariant |
espessura da FONTE | espessura da FONTE |
altura | altura |
esquerda | esquerda |
letter-spacing | letterSpacing |
altura da linha | altura da linha |
list-style | ListStyle |
list-style-image | listStyleImage |
list-style-position | listStylePosition |
list-style-type | listStyleType |
margem | margem |
-margem inferior | marginBottom |
-margem esquerda | marginLeft |
margin-right | marginRight |
margem superior- | marginTop |
transbordar | transbordar |
preenchimento | preenchimento |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
page-break-after | pageBreakAfter |
-Page-break antes | pageBreakBefore |
posição | posição |
alinhamento de texto | alinhamento de texto |
text-decoration | textDecoration |
text-decoration: blink | textDecorationBlink |
text-decoration: line-through | textDecorationLineThrough |
text-decoration: none | textDecorationNone |
text-decoration: overline | textDecorationOverline |
text-decoration: underline | textDecorationUnderline |
text-indent | textIndent |
text-transform | * textTransform * |
topo | topo |
vertical-align | verticalAlign |
visibilidade | visibilidade |
largura | largura |
z-índice | zIndex |