Изменить правило CSS во время выполнения - PullRequest
Новая
       9

Изменить правило CSS во время выполнения

2 голосов
/ 09 августа 2011

Как изменить какие-либо свойства CSS во время выполнения?
Предположим, у меня есть: 

#mycss {
   background:#000;
   padding:0;
}

Тогда во время выполнения #mycss должно быть: 

 #mycss {
    background:#fff;
    padding:10px;
    }

------------------------ ** EDIT *** ------------------------------------- ------

Простите, ребята, я действительно новичок в мире HTML ...

Моя проблема или вопрос, что бы это ни было, я хотел бы создать фрагмент кода, который бы изменял текущие свойства CSS, просто помещая значение в поле ввода (например, color: #fff или white) и когда я нажимаю кнопка, это изменит текущий цвет фона CSS с цвета по умолчанию (#000) на определенный пользователем цвет (например, #fff).

Ответы [ 7 ]

1 голос
/ 09 августа 2011

Существует несколько способов переопределения правил css:

  • Любой элемент примет правило css, определенное ближе всего к нижней части документа CSS, который вы включаете.
  • Любой встроенныйstyle переопределит правило css, определенное в документе css.
  • Любой javascript имеет возможность динамически корректировать свойства css любого данного элемента.
  • Любой элемент может иметь свойство !important, который побеждает что-либо еще определенное.
1 голос
/ 20 июля 2017

Прежде всего, CSS должен быть вставлен как ссылка с названием: 

<link rel="stylesheet" href="css/fillCtrl.css" title="fillCtrl">

Если я захочу изменить в этом CSS следующий селектор (независимо от того, что означает [ctr-panel ~ = "button"] ): 

[ctr-panel~="button"] {
    width: 25px;
    min-width:  25px;
}

Для этого в JS напишите: 

    for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.title == 'fillCtrl'){
            for (var j=0, n=sheet.cssRules.length; j < n; j++){
                var rule = sheet.cssRules[j]
                if (rule.selectorText == '[ctr-panel~="button"]'){
                    rule.style.cssText="width: 12px; min-width: 15px;"
                }
            }
        }
    }

Очевидно, это может быть другая логика, чтобы найти подходящий rule.style .

1 голос
/ 09 августа 2011

Добавьте jQuery на свою страницу.Затем: 

$(function() {
    $('#mycss').css('background-color', '#FFFFFF');
    $('#mycss').css('padding', '10px');
});

Просмотрите документацию по методу .css ().

Но да, никто не знает, что вы имеете в виду под "временем выполнения".

1 голос
/ 09 августа 2011

Вы можете изменить его любым из следующих способов:

  • Добавление объявления стиля на странице
  • Добавление встроенного объявления стиля для элемента
  • Использование jQuery для изменения стиля элемента

Дополнительное стилевое решение: 

<style type='text/css'>
    #mycss{ background: #fff; padding: 10px; }
</style>

Inline Style Solution:

Добавьте следующее style='background: #fff; padding: 10px' к вашему элементу с id='mycss'

Решение jQuery (очевидно, требует, чтобы вы включили jQuery ): 

$('#mycss').css('background-color','#FFFFFF').css('padding','10px');

-------------------------------------------- ----------------Редактировать--------------------------------- --------------------------------

Использование jQuery - я полагаю, я достиг той функциональности, которую вы искали при редактировании Это также может быть выполнено в чистом javascript, просто дайте мне знать, если вы хотите, чтобы это решение, вот демо.

Введите любой цвет и измените фон (красный, # F7F6F5, фиолетовый, # 999 и т. Д.) 

//On Button Click - changes background on click...
$('#change').click(function()
{
    $('body').css('background-color',$('#color').val()); 
});


//On Textbox Change - changes background when the textbox changes...
$('#color').change(function()
{
         $('body').css('background-color',$(this).val());               
});
0 голосов
/ 09 августа 2011

Вы не можете реально изменить CSS, кроме как переключиться на новую таблицу стилей или перезаписать ее.Ват может быть самый простой способ это: (JavaScript) 

document.getElementById('idOfObject').backgroundColor = "#fff";

Смотрите также эту страницу для аналогичной проблемы: http://www.kirupa.com/html5/changing_css_using_javascript.htm

0 голосов
/ 09 августа 2011

У вас есть несколько вариантов:

  • используйте php для вставки динамического css на вашу страницу
  • изменить стиль тега с помощью JavaScript
0 голосов
/ 09 августа 2011

Прежде всего, веб-сайты не имеют runtime. Если я правильно угадываю, вы хотите манипулировать JS после того, как он был отправлен клиенту, и это возможно только с использованием JavaScript.

...