Динамическое изменение содержимого содержимого CSS

Мой друг арендует интернет-магазин у компании. Он может выбирать из разных шаблонов и имеет возможность переопределять предопределенный CSS и добавлять фрагменты javascript. Он попросил меня помочь ей внести несколько изменений, но я не могу с этим справиться: кнопка «Добавить в корзину». В нижеприведенном CSS есть свойство content, которое содержит предопределенное значение. Я хотел бы изменить значение этого свойства динамически, основываясь на атрибуте HTML lang. Вы хоть представляете, как я могу это достичь? (Я знаю, как получить значение атрибута Ланга. Моя проблема заключается в изменении значения свойства «содержание»)Динамическое изменение содержимого содержимого CSS

#add_to_cart:before { 
    display: block; 
    font-family: 'sosa'; 
    font-size: 35px; 
    content: "Ä"; 
    padding-right: 5px; 
    font-weight: 400; 
    width: 71px; 
    height: 71px; 
    line-height: 65px; 
    text-align: center; 
    text-indent: 0; 
    text-shadow: none; 
    color: #fff; 
}

источник

2014-12-02 Barnabás Nagy

См. [Этот ответ] (http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after), это возможно только при использовании обходных решений. – Azeirah

Спасибо! Я смог его решить :) –

Я изменил ваш профиль, @ BarnabásNagy; что здесь не очень уместно. Благодаря! –

Написать функцию Javascript, который обновляет CSS. Javascript может получить доступ к атрибуту HTML.

document.documentElement.lang

источник

2014-12-02 21:03:29

Прошу прощения, я был неясно с моей просьбой. У меня нет проблем с получением значения атрибута lang. Проблема заключается в изменении свойства «content». –

Попробуйте это:

HTML:

<html lang="en"> 
... 
<div id="add_to_cart" data-content="">example</div>

CSS:

#add_to_cart:before { 
    display: block; 
    font-size: 35px; 
    content: attr(data-content); 
    padding-right: 5px; 
    font-weight: 400; 
    width: 71px; 
    height: 71px; 
    line-height: 65px; 
    text-align: center; 
    text-indent: 0; 
    text-shadow: none; 
    color: red; 
}

JS:

$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));

Вы увидите, что символ до «примера» изменяется, когда lang attr <html> изменен.

источник

2014-12-02 21:30:53

Динамическое изменение содержимого содержимого CSS

ответ

Смежные вопросы