Alterando a propriedade width de um seletor antes de css usando JQuery

Eu tenho uma página que tem uma imagem e eu estilizei usando: antes dos seletores CSS.
A imagem é dinâmica, por isso não tem uma largura fixa; Então eu preciso definir: antes da largura da regra dinamicamente.
Eu quero fazer isso no lado do cliente usando JQuery.
Assuma isso:

.column:before{ width: 300px; float: left; content: ""; height: 430px; } .column{ width: 500px; float: right; padding: 5px; overflow: hidden; text-align: justify; } 

Como posso alterar apenas a propriedade de largura da class com :before seletor (e não um sem ele) usando o JQuery?

Eu não acho que exista uma maneira jQuery para acessar diretamente as regras do pseudoclass, mas você sempre pode acrescentar um novo elemento de style à cabeça do documento como:

 $('head').append(''); 

Veja uma demonstração ao vivo aqui

Também lembro de ter visto um plug-in que aborda esse problema uma vez, mas infelizmente não consegui encontrá-lo no primeiro googling.

Os pseudo-elementos fazem parte do shadow DOM e não podem ser modificados (mas podem ter seus valores consultados).

No entanto, às vezes você pode contornar isso usando classs, por exemplo.

jQuery

 $('#element').addClass('some-class'); 

CSS

 .some-class:before { /* change your properties here */ } 

Isso pode não ser adequado para sua consulta, mas demonstra que você pode atingir esse padrão às vezes.

Para obter o valor de um pseudo elemento, tente algum código como https://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery/

 var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before') .getPropertyValue('content') 

Pseudo-elementos não fazem parte do DOM, então eles não podem ser manipulados usando jQuery ou Javascript.

Mas, como apontado na resposta aceita, você pode usar o JS para append um bloco de estilo que termina de estilizar os pseudo-elementos.

A resposta deve ser Jain . Você não pode selecionar um elemento por meio do pseudo-seletor, mas pode adicionar uma nova regra à sua folha de estilo com insertRule .

Eu fiz algo que deveria funcionar para você:

 var addRule = function(sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets[0], "body:before", "content: 'foo'"); 

http://fiddle.jshell.net/MDyxg/1/

Para ser super legal (e responder a pergunta realmente ), eu o implantei novamente e coloquei isso em um plugin jQuery (no entanto, jquery ainda não é necessário!):

 /*! * jquery.addrule.js 0.0.1 - https://gist.github.com/yckart/5563717/ * Add css-rules to an existing stylesheet. * * @see http://stackoverflow.com/a/16507264/1250044 * * Copyright (c) 2013 Yannick Albert (http://yckart.com) * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). * 2013/05/12 **/ (function ($) { window.addRule = function (selector, styles, sheet) { styles = (function (styles) { if (typeof styles === "string") return styles; var clone = ""; for (var p in styles) { if (styles.hasOwnProperty(p)) { var val = styles[p]; p = p.replace(/([AZ])/g, "-$1").toLowerCase(); // convert to dash-case clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; "; } } return clone; }(styles)); sheet = sheet || document.styleSheets[document.styleSheets.length - 1]; if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); else if (sheet.addRule) sheet.addRule(selector, styles); return this; }; if ($) $.fn.addRule = function (styles, sheet) { addRule(this.selector, styles, sheet); return this; }; }(window.jQuery)); 

O uso é bem simples:

 $("body:after").addRule({ content: "foo", color: "red", fontSize: "32px" }); // or without jquery addRule("body:after", { content: "foo", color: "red", fontSize: "32px" }); 

https://gist.github.com/yckart/5563717

“Embora eles sejam renderizados por navegadores através de CSS como se fossem como outros elementos DOM reais, os próprios pseudo-elementos não fazem parte do DOM e, portanto, você não pode selecioná-los e manipulá-los com o jQuery.” ( Selecionando e manipulando pseudoelementos CSS como :: before e :: depois de usar jQuery )

Pode ser melhor definir o estilo com jQuery em vez de usar o seletor pseudo-css.

Uma opção é usar um atributo na imagem e modificá-lo usando jQuery. Então pegue esse valor em CSS:

HTML (note que estou supondo que .cloumn é uma div mas poderia ser qualquer coisa):

 

jQuery:

 // General use: $('.column').attr('bf-width', 100); // With your image, along the lines of: $('.column').attr('bf-width', $('img').width()); 

E então, para usar esse valor em CSS:

 .column:before { content: attr(data-content) 'px'; /* https://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery/... */ } 

Isso irá pegar o valor do atributo de .column e aplicá-lo no antes.

Fontes: CSS attr (observe os exemplos com before), jQuery attr .

Você pode tentar herdar a propriedade da class base:

 var width = 2; var interval = setInterval(function () { var element = document.getElementById('box'); width += 0.0625; element.style.width = width + 'em'; if (width >= 7) clearInterval(interval); }, 50); 
 .box { /* Set property */ width:4em; height:2em; background-color:#d42; position:relative; } .box:after { /* Inherit property */ width:inherit; content:""; height:1em; background-color:#2b4; position:absolute; top:100%; }