Как по условию JS добавить CSS?

Question

[Виталий]

Здравсвтвуйте, есть код:
o = function () {
e(".panel-row-style[style^='color'], .panel-row-style[style*='; color']").find("h1,h2,h3,h4,h5,h6,a,.fa, div, span").css("color", "inherit"),
e(".panel-row-style[style*='background-image']").append('')
}
Мне нужно добавить условие, что если background-image существует, то добавить в файл CSS style.css
в .panel-row-style строчки:
width: auto;
height: 1000px;

.panel-row-style {
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
background-attachment: scroll;
background-position: top center!important;
overflow: visible;
}
Как это можно реализовать?

Answer 1

[Константин Китманов]

Не совсем понятно, что подразумевается под «background-image существует», но если это то, о чем я думаю, то вот так:

var img = new Image();
img.onerror = function () { // сработает, если картинка не загрузилась
    // манипуляции со стилевыми таблицами
}
img.src = backgroundImageUrl; // адрес картинки, существование которой надо проверить

Что касается манипуляций с таблицами стилей, то вот пара ссылок с примерами:
davidwalsh.name/add-rules-stylesheets
www.quirksmode.org/dom/changess.html

Но, мне кажется, можно проще поступить: если картинка не загрузилась, то добавляем нужному элементу класс типа

.missing-image {
    width: auto;
    height: 1000px;
}

Comments

[Виталий]

Спасибо, за Ваш ответ. Подскажите, как в случае img.onerror = function () сделать чтобы сработало когда загрузилась картинка. Мне нужно, чтобы скрипт работал именно когда картинка загружена.

[Константин Китманов]

Виталий: чтобы отреагировать на загрузку картинки, а не на «облом», то делаем так:
img.onload = function () {}
Одновременно можно и то и другое делать, если это надо.

Answer 2

[Сергей Ганин]

if(element1.css.backgroudImage){
element2 = document.querySelector(".panel-row-style")
element2.css.width = "auto";
element2.css.height = "1000px";
}