Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   С помощью JS изменить атрибут CSS/HTML | Я полный нуль (https://javascript.ru/forum/dom-window/64826-s-pomoshhyu-js-izmenit-atribut-css-html-%7C-ya-polnyjj-nul.html)

MSSERG 07.09.2016 21:52
С помощью JS изменить атрибут CSS/HTML | Я полный нуль
 
Объясните мне пожалуйста, как изменять например по щелчку с помощью JS атрибут в файле CSS или HTML, как происходит это, сама конструкция и метод, желательно правильно, чтобы в будущем знал, только сейчас решил изучать JS..



Чисто для примера:

В файле CSS есть такая запись: #test{text-align:center;}

В файле HTML есть такая запись: <p id="test">Текст по центру</p>

Ну и кнопка какая нибудь, при щелчке на неё чтобы изменился (text-align)

MSSERG 08.09.2016 01:47
На вашем форуме очень спешат с ответом, и потому сам нашёл ответ:

<html>

<head>

<script type="text/javascript">
function text()
{document.getElementById("test").style.textAlign="left";}
</script>	

<style>
#test{text-align:center;}
</style>	

</head>

<body>

<button onclick="text()">Поместить текст с левой стороны</button>	

<p id="test">Текст по центру</p>
	
</body>

</html>

laimas 08.09.2016 03:44
Цитата:
Сообщение от MSSERG
На вашем форуме очень спешат с ответом,
А обязаны спешить? :)

Цитата:
Сообщение от MSSERG
потому сам нашёл ответ
Это даже полезнее, чем чей-то ответ. ;)

MSSERG 08.09.2016 22:49
Суть кнопки, при нажатии меняет фоновое изображение по функции JS.

Вот такой код у меня работает без проблем, с трудом кстати его написал:

<html>
<head>	

<script type="text/javascript">
function SmenabgImage(){
if (document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){
	document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){
	document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){
	document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")';
}
else if(document.body.style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){
	document.body.style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
};
}
</script>

</head>
<body style='background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'>
<button onclick="SmenabgImage()">Сменить картинку заднего фона</button>	
</body>
</html>


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

<html>
<head>	

<script type="text/javascript">
function SmenabgImage(){
if (document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg")'){
	document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")'){
	document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/green.jpg")'){
	document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")';
}
else if(document.getElementsByClassName('styleBgImage').style.backgroundImage == 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/blue.jpg")'){
	document.getElementsByClassName('styleBgImage').style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/red.jpg")';
};
}
</script>

<style>
.styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");}
</style>

</head>
<body class="styleBgImage">
<button onclick="SmenabgImage()">Сменить картинку заднего фона</button>	
</body>
</html>


Но у меня не работает и я не понимаю что именно не так, я сдаюсь, помогите.

Ссылки на изображения рабочие.

рони 08.09.2016 23:03
MSSERG,
неуказан индекс элемента который нужен из списка getElementsByClassName

рони 08.09.2016 23:06
MSSERG,
и в теге body нет атрибута style

рони 08.09.2016 23:27
MSSERG,
https://learn.javascript.ru/styles-and-classes
Цитата:
Свойство style содержит лишь тот стиль, который указан в атрибуте элемента, без учёта каскада CSS.
Цитата:
Сообщение от MSSERG
Вот такой код у меня работает без проблем
если даже код написать правильно, от этого он не станет рабочим -- сравнивать значения style.backgroundImage и строки опасно, Не все йогурты одинаково полезны
значение будет зависеть от браузера, а не от того что вы в style изначально прописали.
картинки в массив и гоняйте индекс по кругу

рони 08.09.2016 23:36
MSSERG,
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var n = 0;
function SmenabgImage(){
n++;
if(n == 4) n = 0;
document.getElementsByClassName('styleBgImage')[0].style.backgroundImage = 'url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/'+['white','red','green','blue'][n]+'.jpg")'
}
</script>

<style>
.styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");}
</style>

</head>
<body class="styleBgImage">
<button onclick="SmenabgImage()">Сменить картинку заднего фона</button>
</body>
</html>

MSSERG 10.09.2016 01:42
Спасибо большое!

Сейчас буду разбирать как это работает, теперь понял что значит по индексу гонять!

Ещё раз спасибо, сейчас же начну разбираться более углублённо в этом деле)

К карме +

warren buffet 11.09.2016 05:46
Нет, вот так

var ChBkg= new function(){
   var n = 0,
   dir= 'http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/',
   files=['white.jpg','green.png','yellow.gif','etc.etc'],
   s=document.querySelector('.styleBgImage').style;
   return function(){
      if(n==images.length-1) n=0;
      s.backgroundImage='url("'+dir+files[n++]+'")';
   };
};


Потому что нельзя конкатенировать имя файла с типом файла никогда. Да и dir нежелательно, но можно.

рони 11.09.2016 08:38
Цитата:
Сообщение от warren buffet
Потому что нельзя конкатенировать имя файла с типом файла никогда
почему?

рони 11.09.2016 08:44
warren buffet,
в 7 строке пара ошибок ... и как ваш код применить непонятно.

warren buffet 11.09.2016 08:58
Потому что такой категорический императив, не пилить надвое единую сущность. Мало того, что тип файла может быть любым, он еще может быть в любом кейсе и применительно к жопегам еще и таким - jpeg. А ты кладешь файл в покрустово ложе и напрягаешь кодера и сервер ненужной никому резней.

Цитата:
Сообщение от рони
в 7 строке пара ошибок

Ну исправит, небось не совсем тупой.

warren buffet 11.09.2016 08:59
В некоторых фреймворках вместе с именем пишется и dir. Тут можно полемизировать, а с типом файлов - нельзя.

ЗЫ Это все потому что вы тут теоретеги. Сам бы исправил типы и кейсы для овердохуя набранных откуда попало файлов - сразу бы забыл эту идеологию )))

рони 11.09.2016 12:00
warren buffet,
единственное что полезное, замыкание индекса - остальное снова конь в вакууме

рони 11.09.2016 12:14 


<html>
<head>
<meta charset="utf-8">


<style>
.styleBgImage{background-image:url("http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/white.jpg");}
</style>

</head>
<body class="styleBgImage">
<button onclick="ChBkg()">Сменить картинку заднего фона</button>
<script type="text/javascript">
var ChBkg = function(){
  var n = 1,
  dir= 'http://lazylab.h1n.ru/Archiv-Files-MSSERG-2016/For%20Tests/',
  files=['white.jpg','red.jpg','green.jpg','blue.jpg'],
  s=document.querySelector('.styleBgImage').style;
  return function(){
  if(n==files.length) n=0;
  s.backgroundImage='url("'+dir+files[n++]+'")';
  };
}();

</script>
</body>
</html>

MSSERG 12.09.2016 22:16
Спасибо вам большое, многое понял, от действительно опытных ребят)

Вы тут всё так по полочкам разложили, моя благодарность от всей души)

К карме + уже поставил)

warren buffet 13.09.2016 04:01
Цитата:
Сообщение от рони
конь в вакууме
Да мне пофигу, пиши скрипт переименования и конвертирования, ради конкатенирования.

MSSERG 14.09.2016 11:32
Подскажите пожалуйста материалы для изучения, правильные, я готов изучить всё что посоветуете необходимым, мне очень нужно выучить JS от и до.

Как я понял вы в этом деле боги)

рони 14.09.2016 11:39
MSSERG,
практика, конкретное задание, учебник вверху, дока ещё тут https://developer.mozilla.org/ru/docs/Web/JavaScript
http://www.w3schools.com/js/default.asp
jQuery
http://api.jquery.com/
остальное спросить у гугла или придумать самому


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