Изменить содержимое класса CSS с помощью JQuery - PullRequest
Новая
       1

Изменить содержимое класса CSS с помощью JQuery

0 голосов
/ 17 марта 2019

Можно ли изменить содержимое класса css с помощью JQuery?

Например, у меня есть следующая страница:

html 

<div class="foo"> FOO </div>

css 

.foo {
    color: black;
}

Теперь я хочу изменить цвет в классе foo и, возможно, добавить другие атрибуты css в классе.Могу ли я сделать это с JQuery?

, чтобы я получил

css 

.foo {
    color: red;
    display: inline;
}

Я понимаю, что можно изменить стильопределенного элемента любым способом, который я хочу, но меня интересует изменение содержания класса здесь.

Спасибо.

Ответы [ 5 ]

0 голосов
/ 17 марта 2019

Вы можете использовать два разных файла CSS и переключать URL в теге ссылки на событие. 

<link rel="shortcut icon" href="FIRST_CSS_FILE_URL">


$('button').click(function() {
    $('link').attr('href', SECOND_CSS_FILE_URL)   
})
0 голосов
/ 17 марта 2019

Вот частичный ответ на вашу проблему ... Я думаю, что это то, что вы хотите: 

**JS**
$(document).ready(function() {
    let css = "";
    $.ajax({
        method: 'get',
        url: 'test.css',
        success: function(response) {
            css = response;
            let pos = css.indexOf(".foo {");
            innerText = "   backgound: #ccc";
            css = css.substring(0, pos + ".foo {".length) + "\n" +  innerText + "\n}";
            console.log(css);
        }
    });
});

**CSS Input**
.foo {
    color:black;
}

**CSS Output**
.foo {
   backgound: #ccc
}

Допущения: ваш CSS-файл находится в той же папке, что и HTML. Единственная проблема с Javascript - он не позволяет вам писать во внешний файл. Проверка для плагинов jQuery обнаружена с одним старым плагином под названием twFile . Я не мог найти его код минимизированный / другой. Посмотрите, можете ли вы пойти дальше ... просто записав файл (возможно, nodejs).

0 голосов
/ 17 марта 2019

Да, вы можете изменить весь класс, используя http://api.jquery.com/attr/, как показано ниже.Но вам нужно назначить идентификатор для вашего элемента. 

<div id="dv_id" class="foo"> FOO </div>
$("#dv_id").attr('class', 'newClass');

Вы можете даже добавить или переключить класс следующим образом: 

$("#dv_id").addClass('newClass');
$("#dv_id").toggleClass('change_me newClass');

или, может быть, вы ищете Изменить класс CSSСвойства с JQuery

Надеюсь, что это поможет вам решить ваш вопрос

0 голосов
/ 17 марта 2019

Вы не можете изменить содержимое внешнего CSS-файла. Тем не менее, вы можете перезаписать его. Если класс css не определен во внешнем файле css, вы можете изменить его.

Я думаю, что ваша цель - изменить стиль всех элементов одного класса foo, и вы хотите сделать это один раз в одном месте. В этом случае перезапись стиля послужит вашей цели.

Просто создайте тег стиля, определяющий стиль, и вставьте его в конец <head></head> тега

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

$('<style>.foo { color: red, display: inline; }</style>').appendTo('head');
0 голосов
/ 17 марта 2019

Вы можете использовать это

$(".foo").css({"color": "red", "display": "inline"});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...