Форум

Conus · #1 (**permalink**) 14.06.2020, 19:13

подскажите подалуйста
делаю сетатрибут
css

style : {   'background-color': '#EDE6E6',  
              boxShadow : ' 1px -1px 5px 3px rgba(0, 0, 0, .2)',

 
	   }


так boxShadow не работает другие свойства добавляю работают
html.setAttribute("style",  (s = JSON.stringify(  htmlAttribute['style'] ) ).substr(1, (s.length-2) ).replace(/,/g, ';').replace(/"/g, '') + ';' )

так если добавить работает
 html.setAttribute("style", " box-Shadow : 1px -1px 5px 3px + rgba(0, 0, 0, .2) "  )

а так только последний пункт добавляется не пойму почему
подскажите пожалуйста

if('style' in htmlAttribute )
{ 
   for( var i in htmlAttribute['style'] )  
   { 
       var c = i, d = htmlAttribute['style'][i] 
		
       html.setAttribute('style', ( c+ ':' + d +';') )  
       

   }

}

рони · #2 (**permalink**) 14.06.2020, 19:28

Conus,

if('style' in htmlAttribute )
{
Object.assign(html.style, htmlAttribute.style)

}

Conus · #3 (**permalink**) 14.06.2020, 23:23

спасибо, так работает, но все же от чего от чего здесь последний элемент только
я так понимаю предыдущие затираются но почему?

for( var i in htmlAttribute['style'] ) 

   {

       var c = i, d = htmlAttribute['style'][i]

       html.setAttribute('style', ( c+ ':' + d +';') ) 
   }

рони · #4 (**permalink**) 14.06.2020, 23:33

Сообщение от Conus

но почему?

а = 5;
a = 4;
почему а не 5?

if('style' in htmlAttribute )
{
for( var i in htmlAttribute['style'] )

   {
       html.style[i] = htmlAttribute['style'][i]
   }

}

рони · #5 (**permalink**) 14.06.2020, 23:48

Conus,
если хочется через атрибут, а не через свойство.
строка 12 изменено имя свойства.
строка 22 сотрёт стиль в строке 8, так как установит новое значение!!!
setAttribute это установка значения атрибута.
если нужно сохранить прежнее значение

var css = html.getAttribute('style')+';';

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="border: 1px dashed Gray; padding: 5px">test</div>
  <script>
var html = document.querySelector('div');
var htmlAttribute = {style : {
              'background-color': '#EDE6E6',
              'box-shadow' : ' 1px -1px 5px 3px rgba(0, 0, 0, .2)'
 	   }};
if('style' in htmlAttribute )
{    var css = '';
for( var i in htmlAttribute['style'] )
   {
       var d = htmlAttribute['style'][i];
       css += `${i}:${d};`
   }
   html.setAttribute('style', css)
}
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript