Как заменить значения в CSS на JS?

Question

[DrunkMaster]

<style type="text/css">
  .one { background-color: #fff; width: 250px; margin: 20px -30px -30px 30px; position: absolute; }
</style>

<div class="one">текст</div>

Хочу менять первое и последнее значение margin на лету с помощью css. Но как это сделать? Ведь getElementById я не могу сделать, у этих элементов нет Id?

Comments

[Сергей Сергей]

по тегу и содержимому, потом строковая замена.

[DrunkMaster]

Сергей Сергей: вы знали что пишете херню, поэтому и пишете комментом а не ответом ))

[Сергей Сергей]

DrunkMaster: херня херне рознь. Мне показалось, что требуется менять само определение стиля. Ну раз херня, то херня. Хотя да, моя херня не сработает, нужно переопределять стиль через создание нового стиль-узла, наверно.

Answer 1

[Dmitriy Mozgovoy]

Учимся сначала тут: https://learn.javascript.ru/styles-and-classes

document.querySelector(".one").style.margin = "20px -30px -30px 30px";
 //or
var el=document.querySelector(".one");
el.style.marginTop = "20px";
el.style.marginLeft = "20px";

Про Jquery, а тем более Angular, который вообще тут не при чем, не ведитесь. Сначала native- потом любой DOM фреймворк..

И кстати, про старый добрый document.getElementsByClassName() - если нужно получить только один элемент и DOM дерево большое у него могут быть проблемы с производительностью, так как выборка всех совпадений идет, а не только первый.

Comments

[DrunkMaster]

Учебник который вы скинули прочитал, на фреймворки не ведусь, копаю чисто натив, код сейчас опробуемс... благодарю

[Anton Filippov]

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

[DrunkMaster]

Антон Ф.: Благодарю, я знаю между ними разницу )) А ещё есть сайт youmightnotneedjquery.com

[Anton Filippov]

DrunkMaster: так я ж говорю, можно и на ванилле шпарить, но если не хватает гугла и приходится идти на тостер чтобы узнать как выбрать элемент - проще юзать библиотеку, для этого созданную

Answer 2

[Влад Пасечник]

getElementByClass ;)
А ещё лучше воспользоваться jQuery
$('.one').css(.......)

Comments

[DrunkMaster]

Я пока учу JS поэтому в обучающих целях на чистом делаю, вот за метод getElementByClass спасибо не знал про него.

[Влад Пасечник]

DrunkMaster: за благодарность поставь что это решение является ответом ;)

[DrunkMaster]

Влад Пасечник: Обязательно отметим, помучаю вас ещё немного (html-код тот же остался):

var block = getElementByClass("one");
	console.log(block);

Uncaught ReferenceError: getElementByClass is not defined
Что я делаю не так?

[DrunkMaster]

Влад Пасечник: а document. пропустил, поставил, теперь: Uncaught TypeError: document.getElementByClass is not a function

[Влад Пасечник]

DrunkMaster: ой сорри getElementsByClassName

[Влад Пасечник]

DrunkMaster: Давно что-то я на чистом js не писал

[Vitaliy Orlov]

var block = document.getElementsByClassName("one");
console.dir(block);

советую изучению начать с ознакомления с этим учебником javascript.ru , это уменьшит кол-во подобных вопросов

[DrunkMaster]

Vitaliy Orlov: я прочитал его уже, но когда-то от чтения учебника к практичке надо переходить. По вашему коду Uncaught TypeError: document.getElementByClass is not a function

[DrunkMaster]

Влад Пасечник: Я загуглил, поправил на Name уже но Uncaught TypeError: document.getElementByClassName is not a function

[Влад Пасечник]

DrunkMaster: вы не верно написали. ElementS, а не Element

Answer 3

[Anton Filippov]

Обратите внимание на ..Elements.. :
var one = document.getElementsByClassName('one');

про CSS

Comments

[DrunkMaster]

Ахах, в точку, плохо когда нуб, тебе скидывают метод, думаешь что люди знающие, не перепроверяешь уж за ними )))

[Anton Filippov]

DrunkMaster: автокомплит не даст ошибиться

[Dmitriy Mozgovoy]

и может =document.getElementsbyClassName('one')[0]; а то будет сейчас спрашивать почему TypeError: one.style is undefined =)

[DrunkMaster]

Digital Brain: неет, я сделал console.log и увидел что там ))

Answer 4

[Павел Кононенко]

Если задача именно в изменении значений внутри тега style, то здесь нужен ангуляр. Без него получится типичный говнокод.

Comments

[DrunkMaster]

Я только сел JS учить, какой мне ангуляр ))