Usando Javascript em CSS

É possível usar JavaScript dentro de CSS?

Se for, você pode dar um exemplo simples?

O IE e o Firefox contêm maneiras de executar o JavaScript a partir do CSS. Como Paolo menciona, uma maneira no IE é a técnica de expression , mas há também o comportamento mais obscuro da HTC , no qual um XML separado que contém seu script é carregado via CSS. Uma técnica semelhante para o Firefox existe, usando XBL . Essas técnicas não excluem JavaScript do CSS diretamente , mas o efeito é o mesmo.

HTC com IE

Use uma regra de CSS como esta:

 body { behavior:url(script.htc); } 

e dentro desse arquivo script.htc tem algo como:

     

O arquivo HTC executa a function main() no evento já ondocumentready (referindo-se à prontidão do documento HTC).

XBL com o Firefox

O Firefox suporta um hack similar de execução de script XML, usando XBL.

Use uma regra de CSS como esta:

 body { -moz-binding: url(script.xml#mycode); } 

e dentro do seu script.xml:

 < ?xml version="1.0"?>     alert("XBL script executed.");     

Todo o código dentro da tag do construtor será executado (uma boa idéia para quebrar o código em uma seção CDATA).

Em ambas as técnicas, o código não é executado, a menos que o seletor CSS corresponda a um elemento dentro do documento . Usando algo como body , ele será executado imediatamente no carregamento da página.

Eu acho que você pode estar pensando em expressions ou “propriedades dinâmicas” , que são suportadas apenas pelo IE e permitem que você defina uma propriedade para o resultado de uma expressão javascript. Exemplo:

 width:expression(document.body.clientWidth > 800? "800px": "auto" ); 

Esse código faz com que o IE emule a propriedade max-width que ele não suporta.

Todas as coisas consideradas, no entanto, evitam usá-las . Eles são uma coisa ruim e ruim.

Para facilitar a solução do seu problema, dadas as informações que você forneceu, presumo que você esteja buscando o CSS dynamic. Se este for o caso, você pode usar uma linguagem de script do lado do servidor para fazer isso. Por exemplo (e eu adoro fazer coisas assim):

styles.css.php:

 body { margin: 0px; font-family: Verdana; background-color: #cccccc; background-image: url('< ?php echo 'images/flag_bg/' . $user_country . '.png'; ?>'); } 

Isso configuraria a imagem de fundo para qualquer coisa que estivesse armazenada na variável $ user_country . Este é apenas um exemplo de CSS dynamic; Existem virtualmente possibilidades ilimitadas quando se combina CSS e código do lado do servidor. Outro caso seria fazer algo como permitir que o usuário crie um tema personalizado, armazenando-o em um database e, em seguida, usando o PHP para definir várias propriedades, da seguinte forma:

user_theme.css.php:

 body { background-color: < ?php echo $user_theme['BG_COLOR']; ?>; color: < ?php echo $user_theme['COLOR']; ?>; font-family: < ?php echo $user_theme['FONT']; ?>; } #panel { font-size: < ?php echo $user_theme['FONT_SIZE']; ?>; background-image: < ?php echo $user_theme['PANEL_BG']; ?>; } 

Mais uma vez, porém, isso é apenas um exemplo fora da cabeça; Aproveitar o poder do CSS dynamic através de scripts do lado do servidor pode levar a algumas coisas incríveis.

IE suporta expressões CSS:

 width:expression(document.body.clientWidth > 955 ? "955px": "100%" ); 

mas eles não são padrão e não são portáveis ​​entre os navegadores. Evite-os, se possível. Eles estão obsoletos desde o IE8 .

Para uma solução mais atual, usando o Vue.

  var vue = new Vue({ el : "#app", data: { styleObject: { color: 'red', fontSize: '20px' }, activeColor: 'blue', activeColor2: 'green', fontSize: '30px' }, methods : { color: function (color) { this.activeColor2 = color; } }, mounted: function () { if(1 > 0) { this.color('gray'); } } }) 
  
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Eu me deparei com um problema semelhante e desenvolvi duas ferramentas autônomas para realizar isso:

  • O CjsSS.js é uma ferramenta Javascript do Vanilla (não há dependencies externas) que seja compatível com o IE6.

  • ngCss é um módulo angular + filtro + fábrica (aka: plugin) que suporta o Angular 1.2+ (portanto, de volta ao IE8)

Ambos os conjuntos de ferramentas permitem que você faça isso em uma tag STYLE ou em um arquivo * .css externo:

 /* */ BODY { color: /*{{mainColor}}*/; } 

E isso em seus atributos de style na página:

 
blah

ou

 
blah

NOTA: No ngCss, você também pode fazer $scope.mainColor no lugar de var mainColor

Por padrão, o Javascript é executado em um IFRAME em sandbox, mas como você cria seu próprio CSS e o hospeda em seu próprio servidor (assim como seus arquivos * .js), o XSS não é um problema. Mas o sandbox oferece muito mais segurança e tranquilidade.

O CjsSS.js e o ngCss estão em algum lugar entre as outras ferramentas disponíveis para realizar tarefas semelhantes:

  • MENOS , SASS e Stylus são todos pré-processadores e exigem que você aprenda um novo idioma e manuseie seu CSS. Basicamente, eles estenderam o CSS com novos resources de linguagem. Todos também são limitados a plugins desenvolvidos para cada plataforma, enquanto CjsSS.js e ngCss permitem que você inclua qualquer biblioteca Javascript via diretamente no seu CSS!

  • AbsurdJS viu os mesmos problemas e foi exatamente na direção oposta dos pré-processadores acima; em vez de estender CSS, AbsurdJS criou uma biblioteca Javascript para gerar CSS.

CjsSS.js e ngCss tomaram o meio termo; você já conhece CSS, você já conhece Javascript, então deixe-os trabalhar juntos de uma maneira simples e intuitiva.

Não em qualquer sentido convencional da frase “dentro do CSS”.

Isto acaba por ser uma questão muito interessante. Com mais de cem propriedades sendo definidas, você pensaria que poderia digitar .clickable {onclick: “alert (‘hi!’);” ; } no seu CSS, e funcionaria. É intuitivo, faz muito sentido. Isso seria incrivelmente útil em interfaces de usuário maciças geradas dinamicamente.

O problema:
A polícia do CSS, em sua infinita sabedoria, desenhou um muro chinês entre apresentação e comportamento . Qualquer HTML corretamente rotulado on-whatever é intencionalmente não suportado pelo CSS. ( Tabela de propriedades completas )

A melhor maneira de contornar isso é usar o jQuery, que configura um mecanismo interpretado em segundo plano para executar o que você estava tentando fazer com o CSS de qualquer maneira. Veja esta página: Adicionar Javascript Onclick To .css File .

Boa sorte.