Javascript-форум (https://javascript.ru/forum/)
-   Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)
-   -   Применить css в скрипте (https://javascript.ru/forum/css-html-firefox-mizilla/71251-primenit-css-v-skripte.html)

konsd26 04.11.2017 16:43

Применить css в скрипте
 
Здравствуйте. Создал кликабельные кнопки вида:
var link = '<a target="_blank" title="random" href="http://run.me/' + m_enc + '" class="me"><img src="'+imgs+'google.com"></a>';

Переменные m_enc и imgs описываются в самом скрипте разумеется.
Далее хочу применить стиль для данной кнопки
$(".me").css({
     "display": "inline-block",
     "border": "1px solid #CC0000",
      "background-image": "linear-gradient(to top, #FF0000, #FF0000)",
     "background-color": "#CC0000",
});

но ничего не происходит. Если прописать в тэг <a> style=""
var link = '<a target="_blank" title="random" href="http://run.me/' + m_enc + '" class="me" style=" display: inline-block; border:1px solid #CC0000;  background-image: linear-gradient(to top, #FFFFFF, #FFFFFF); background-color: #FFFFFF; "><img src="'+imgs+'google.com"></a>';


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

konsd26 04.11.2017 19:14

Одним из решений нашел способ используя
// @grant GM_addStylе

GM_addStyle(`
              .yu {
     display: inline-block;
     border: 1px solid #CC0000;
     padding: 8px 18px;
     background-color: #F0F0F0
}
        `);


Не знаю правильно это или нет, но в статьях встречал только такой способ $(".me").css({

Rasy 05.11.2017 15:02

konsd26,
так работает?
$(function() {
  $(".me").css({
     "display": "inline-block",
     "border": "1px solid #CC0000",
      "background-image": "linear-gradient(to top, #FF0000, #FF0000)",
     "background-color": "#CC0000",
  });
});

konsd26 06.11.2017 20:19

Rasy,
Спасибо. Попробую. Чтобы не создавать кучу тем, возможно вы так же знаете, как вставить html код? Если писать его
var name = <div...>hfhgj</div>
и все это в строчку, то все работает. но тогда ни какого форматирования нет. А если писать с новых строк, то код уже не работает.

Rasy 06.11.2017 20:31

konsd26,
Конкатенация строк
var html = '<div style="display: inline-block; ' +
'color: white; ' +
'background-color: black;">' +
'Lorem ipsum' +
'</div>';
alert(html);

konsd26 07.11.2017 21:34

Rasy,
Спасибо большое. Буду учиться дальше))


Часовой пояс GMT +3, время: 01:16.