Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Я не разбираюсь в RegExp (https://javascript.ru/forum/misc/22489-ya-ne-razbirayus-v-regexp.html)

Solovei95 22.10.2011 10:43

Великие проблемы с background-image.
 
Я хочу сделать перевод CSS свойств в массив и обратно.
Пример: <div id="block" style="background-image:url(),linear-gradient()"></div>
Я знаю как получить свойства CSS, но не знаю как разбить их на массивы?

Solovei95 22.10.2011 10:45

Неужели прошло 100 лет, а люди так и не научились при помощи JS мастерски приручать CSS. :o

Aetae 22.10.2011 11:12

>Я не разбираюсь в RegExp
Это печально.

И таки да, непонятно, что за массивы то нужны?

Триви 22.10.2011 11:16

А зачем тут регэксп?

<div id="block" style="width:300px; display: block"></div>

 <script>
 var st = document.getElementById('block').getAttribute('STYLE');
  
 var arr = st.split(';'); // в массив
 alert(arr);
  
 var str = arr.join(';');  // обратно
 alert(str);
 </script>

melky 22.10.2011 11:35

писать css-свойства через запятую ?

не маразмируйте. разделяйте правила через ;


Триви,
var st = document.getElementById('block').getAttribute('STYLE');

equals to
<div id="block" style="width:300px; display: block"></div>
<script>alert(document.getElementById('block').*!*style.cssText*/!*)</script>

Solovei95 22.10.2011 11:36

melky,
Да вы ВСЕ не так поняли!
http://javascript.ru/forum/misc/2249...svojjstvo.html
Речь идет о Multiple background

Триви 22.10.2011 11:41

Цитата:

Сообщение от melky (Сообщение 132235)
Триви,
var st = document.getElementById('block').getAttribute('STYLE');

equals to
<div id="block" style="width:300px; display: block"></div>
<script>alert(document.getElementById('block').*!*style.cssText*/!*)</script>

Ага, вылетело из головы это свойство :)

melky 22.10.2011 12:28

ааа..

я сделал это через match
написал такую регу
Код:

/[\w\-]+\([^\)]+\)/g
соответствует или буквам, или дефису(минусу), которых много, и после которых идёт открывающая круглая скобка, в которой находится всё, кроме закрывающей круглой скобки. после этого находится закрывающая круглая скобка.

пример :
// разобрали.
reg = /[\w\-]+\([^\)]+\)/g;

a=document.createElement('div');a.style.cssText='background:url("images/bar.png"), -webkit-linear-gradient(left,red,orange,blue)';

alert(a.style.background); // добавились запятые между цветами в градиенте !!

*!*
var array = a.style.background.match(reg); // это почти массив.
*/!*


alert( *!*[].slice.call(array)*/!*/*а теперь это массив*/.join('\n---------\n') )


ЗЫ долго отвечал) надо было реги повторить. забываются быстро


UPd но есть и минусы

рега не хавает такое
-moz-linear-gradient(bottom, rgb(247,232,44) 49%, rgb(255,255,71) 75%, rgb(255,255,100) 88%)

так что вам придётся убирать цвета в виде rgb(247,232,44) и преобразовывать их в hex.

Aetae 22.10.2011 12:52

На вскидку, если упростить, как-то так:
/.+?(?=, url|, -moz-linear-gradient|$)/g


<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, rgb(247,232,44) 49%, rgb(255,255,71) 75%, rgb(255,255,100) 88%)"></div>
<script>
alert(document.getElementById("block").style.background.match(/.+?(?=, url|, -moz-linear-gradient|$)/g).join('\n'))
</script>


Цитата:

Сообщение от melky (Сообщение 132246)
так что вам придётся убирать цвета в виде rgb(247,232,44) и преобразовывать их в hex.

Хы, хы, браузеру на твои желания пофиг.
<div id="block" style="background:url(clock.png),-moz-linear-gradient(bottom, #F7E82C 49%, #FFFF47 75%, #FFFF64 88%)"></div>
<script>
alert(document.getElementById("block").style.background)
</script>

Solovei95 22.10.2011 13:15

Блин! Я говорю нужна библиотека!


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