Блог

Главная - Вопросы по программированию - Создание упрощенного кода в отдельных частях

Создание упрощенного кода в отдельных частях

#html #css

#HTML #css

Вопрос:

                 <input type='button' class="myButton" onclick="document.body.style.cssText =';background-image: url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;';" value="Sehr-Gut">

Есть ли какой-либо способ упростить этот код? Например, создать стиль css и поместить его в это событие onclick?

Комментарии:

1. Вопрос должен был быть, есть ли способ сделать это неправильно? Конечно! вы можете создать класс со стилями, а затем в javascript добавить этот класс, нажав на кнопку

2. как это делает его неправильным?

3. Если это может быть проще, покажите мне, как: S

Ответ №1:

HTML

 <input type='button' class="myButton" value="Sehr-Gut">

jQuery

 $('.myButton').click(function(){
    document.body.style.cssText ='background-image:url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;';
});

Но…

Еще более простым способом может быть использование Javascript для добавления класса к <body> элементу:

jQuery

 $('.myButton').click(function(){ $('body').addClass('newClass'); });

CSS

 .newClass {
    background-image: url(img01.jpg);
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
};

Ответ №2:

Для этого вам, вероятно, понадобится jQuery. Тогда вы могли бы использовать решение @philtune или другой подход:

 <input type='button' class="myButton"
       onclick="$(body).addClass('some-classname')"
       value="Sehr-Gut">

и в вашем css

 body.some-classname {
  background-image: url(img01.jpg);
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover; 
  background-size: cover;
}