Как изменить border через js - Исправление ошибок и поиск оптимальных решений проблем

Rva4

3 / 3 / 2

Регистрация: 26.01.2016

Сообщений: 229

11.12.2016, 10:30. Показов 11010. Ответов 3

Метки нет (Все метки)

изменить border для id=»w1″ на

CSS

1	border: 2px solid red;

Помогите плзззз

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

velikashkin

12 / 11 / 10

Регистрация: 22.10.2016

Сообщений: 30

11.12.2016, 10:42

Сообщение было отмечено Rva4 как решение

Решение

JavaScript

Javascript

1 2	var el = document.getElementById('w1'); el.style.border = "2px solid red";

JQuery

Javascript

1	$("#w1").css("border", "2px solid red");

3 / 3 / 2

Регистрация: 26.01.2016

Сообщений: 229

11.12.2016, 10:42

[ТС]

velikashkin, Изменяет border или добавляет новый?

velikashkin

12 / 11 / 10

Регистрация: 22.10.2016

Сообщений: 30

11.12.2016, 10:53

Rva4,
Изменяет, конечно. Если есть бордер, установленный хоть в файле css,

CSS

1
2
3

#w1 {
border: 2px solid green;
}

хоть прописанным

HTML5

1	<div id="w1" style="border: 2px solid green;"></div>

к примеру, то в первом случае добавит атрибут style, а во втором его изменит.

Источник

In this tutorial, we shall learn to set the style of an element’s border with JavaScript. To set the style of an element’s border, use the borderStyle property in JavaScript.

Let us discuss the borderStyle property available in detail.

Using the borderStyle Property

With the borderStyle property, we can set or return the style of an element’s border.

Syntax

Following is the syntax to use the borderStyle property to set the style of an element’s border with JavaScript −

object.style.borderStyle = style;

This syntax allows us to set the required border style to the element’s style. We will see the available style values below.

Parameters

none − Sets no border.
hidden − Similar to «none». Unique to table element border issues.
dotted − Sets a dotted border.
dashed − Sets a dashed border.
solid − Sets a solid border.
double − Sets two borders. The total width is equal to the border width.
groove − Sets a 3-D grooved border. The effect is dependent on the color.
ridge − Sets a 3-D ridged border. The effect is dependent on the color.
inset − Sets a 3-D inset border. The effect is dependent on the color.
outset − Sets a 3-D outset border. The effect is dependent on the color.
initial − Sets this property to the default value.
inherit − Inherits this property from its parent element.

The default value for the property is none. The return value is a string representing the border style.

Example 1

You can try to run the following code set in the style of an element’s border with JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      #newDiv {
         height: 150px;
         width: 450px;
         border: 2px solid #000000;
      }
   </style>

   <body>
      <div id="newDiv">
         Demo Content!
      </div>
      <br>
      <button type="button" onclick="display()">Change border style</button>
      <script>
         function display() {
            document.getElementById("newDiv").style.borderStyle = "dashed";
         }
      </script>
   </body>
</html>

Example 2

In this program, we are setting different border styles to multiple div elements.

When the user presses the button, we call the function to set an element’s border style following the syntax given above.

<html>
<head>
   <style>
      .bordrStylEl {
         background-color: #FFFFFF;
         height: 50px;
         width: 60px;
         padding-top: 35px;
         padding-top: 5px;
         border: 5px solid blue;
         text-align: center;
         float: left;
         margin-right: 5px;
      }

      #bordrStylBtnWrap {
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the style of an element's border using the<i> borderStyle </i> property.
   </h3>
   <div class="bordrStylEl" id="bordrStylEl1"> Border 1 </div>
   <div class="bordrStylEl" id="bordrStylEl2"> Border 2 </div>
   <div class="bordrStylEl" id="bordrStylEl3"> Border 3 </div>
   <div class="bordrStylEl" id="bordrStylEl4"> Border 4 </div>
   <br>
   <div id="bordrStylBtnWrap"> <br />
      <p> Click the button to set different styles to an element's border. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setBorderStyle() {
      var bordrStylBtnWrap = document.getElementById("bordrStylBtnWrap");
      var bordrStylEl1 = document.getElementById("bordrStylEl1");
      var bordrStylEl2 = document.getElementById("bordrStylEl2");
      var bordrStylEl3 = document.getElementById("bordrStylEl3");
      var bordrStylEl4 = document.getElementById("bordrStylEl4");
      bordrStylEl1.style.borderStyle = "dashed";
      bordrStylEl2.style.borderStyle = "solid";
      bordrStylEl3.style.borderStyle = "dotted";
      bordrStylEl4.style.borderStyle = "double";
      bordrStylEl1.innerHTML = "<b> dashed </b>";
      bordrStylEl2.innerHTML = "<b> solid </b>";
      bordrStylEl3.innerHTML = "<b> dotted </b>";
      bordrStylEl4.innerHTML = "<b> double </b>";
   }
</script>
</html>

Example 3

In this program, we are setting an element’s border style to a single div element. We get an element’s border style from the user.

When the user presses the button, we call the function to set an element’s border style following the syntax given above.

<html>
<head>
   <style>
      #bordrStylUsrEl {
         background-color: #FFFFFF;
         border: 5px solid purple;
         text-align: center;
      }
   </style>
</head>
<body>
   <h3>Setting the style of an element's border using the <i> borderStyle</i> property.
   </h3>
   <div id="bordrStylUsrEl"> Set the border style here. </div>
   <br>
   <div id="bordrStylUsrBtnWrap">
      <select id="bordrStylUsrSel" size="10">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option/> groove
         <option/> inset
         <option/> none
         <option/> hidden
         <option/> outset
         <option/> ridge
         <option selected = "selected"/> solid
         <option/> inset
         <option/> outset
      </select>
      <br><br>
      <p> Provide the border style and click on the button. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setBorderStyle() {
         var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel");
         var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex;
         var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text;
         var bordrStylUsrBtnWrap = document.getElementById("bordrStylUsrBtnWrap");
         var bordrStylUsrEl = document.getElementById("bordrStylUsrEl");
         bordrStylUsrEl.style.borderStyle = bordrStylUsrSelStat;
         bordrStylUsrEl.innerHTML =
            "You have set the element’s border style to <b>" + bordrStylUsrEl.style.borderStyle + "</b>";
      }
   </script>
</html>

In this tutorial, we went through the borderStyle property in JavaScript. The borderStyle property is a built-in option in JavaScript to set the style of an element’s border and is very easy to code.

Источник

Как правило, начинающие изучать веб-разработку люди уже знают, как легко можно поменять внешний вид элемента с помощью CSS стилей. Но менять стили можно и через JavaScript. Когда же наступает необходимость это делать через JavaScript? Первое, что приходит в голову — это для создании анимаций.

Изменение стилей через CSS

У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.

//HTML код <div class="container"> <h1 id="heading">Польза ананасов</h1> </div>


//CSS код

.container {

    width: 400px;

    border: 10px solid plum;

    margin: 20px auto;

}
#heading {

    font-size: 24px;

    font-weight: 700;

    color: black;

    font-family: 'Arial Narrow Bold', sans-serif;

    text-align: center;

}

Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.

#heading { color: violet; }

Заголовок стал фиолетовый.

Изменение стилей через JavaScript

Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:

Получить элемент
Обратится к свойству элемента
Установит новое значение

Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение — фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект — style, в свойствах которого хранятся все стили элемента h1.

// получение элемента по селектору let headingElement = document.querySelector('#heading'); // обращение к интересующему свойству и присвоение нового цвета headingElement.style.color = 'violet';

Цвет заголовка опять поменялся на фиолетовый.

Названия свойств

Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.

let containerElement = document.querySelector('.container'); containerElement.style.border-color = 'black'; // нельзя писать border-color

Упс! Ничего не произошло и выскочило сообщение об ошибке, а цвет у рамки не поменялся. Почему не сработало? Ведь в обычном CSS мы бы так и написали border-color: black. Все дело в дефисе, имена свойств в JavaScript не могут содержать дефис. Поэтому все CSS свойства в названиях которых есть дефис, нужно преобразовать в другой синтаксис. Для этого мы убираем дефис и пишем первую букву второго слова, заглавной. Такой стиль написания называется camelCase (верблюжий регистр), напоминающий горбы верблюда.

let containerElement = document.querySelector('.container'); containerElement.style.borderColor = "black"; // так правильно borderСolor

Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.

Заключение

Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты — JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.

Создано 05.04.2021 10:14:06
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

02.09.2012, 14:15

Новичок на форуме

Регистрация: 02.09.2012

Сообщений: 2

Помогите сделать смену border на javascript

Добрый день. есть страница, на ней большая фотка, а под ней 4 фрагмента (маленькие фотки). при клике по маленькой фотке, она показывается на месте большой.
Вот код:
<script type=»text/javascript»>
function setBigImage(foto) {
document.getElementById(«bigimg»).src = foto.src;
}
</script>

<img id = ‘bigimg’ src=»img/bimg_79.jpg» border=»1″> — это большая фотка

<img height=’100′ border=1 style = ‘cursor: pointer;’ onclick = ‘setBigImage(this)’ src=’img/bimg_80.jpg’> — это фрагменты
<img height=’100′ border=1 style = ‘cursor: pointer;’ onclick = ‘setBigImage(this)’ src=’img/bimg_81.jpg’> — это фрагменты

Помогите сделать, чтоб при клике на маленькую фотку, цвет рамки border стал зеленым цветом.
Очень нужно, но не знаю как
Спасибо заранее за помощь!

02.09.2012, 15:39

Профессор

Регистрация: 03.05.2011

Сообщений: 848

verhmax, задайте картинкам-фоткам одинаковый атрибут name (например, img) и

function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    for (i=0; i < document.getElementsByName("img").length; i++) {
        document.getElementsByName("img").style.border = "1px solid black";
    }
    foto.style.border = "2px solid green";
}

02.09.2012, 20:59

Новичок на форуме

Регистрация: 02.09.2012

Сообщений: 2

заменил функцию на Вашу, картинкам присвоил вот так:
<img mane=’img’ height=’100′ border=1 style = ‘cursor: pointer;’ onclick = ‘setBigImage(this)’ src=’img/bimg_80.jpg’>
не работает. если не присваивать картинкам name=’img’ то работает, выставляет бордер, но не убирает при клике по другой картинке

02.09.2012, 22:17

Профессор

Регистрация: 03.05.2011

Сообщений: 848

<img *!*mane*/!*='img' height='100' border=1 style = 'cursor: pointer;' onclick = 'setBigImage(this)' src='img/bimg_80.jpg'>

не mane, а name и свойство border занесите в style, можно вместе с height или отдельно class сделайте

<img name='img' style = 'cursor: pointer; border: none; height: 100px' onclick = 'setBigImage(this)' src='img/bimg_80.jpg'>

<style>
.img { width: 75px; height: 75px; border: 1px solid black; cursor: pointer }
</style>
<script>
function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    for (i=0; i < document.getElementsByClassName("img").length; i++) {
        document.getElementsByClassName("img")[i].style.border = "1px solid black";
    }
    foto.style.border = "2px solid red";
}
</script>
<div style="width: 100%; text-align: center;"><img src="http://img-fotki.yandex.ru/get/6608/158970486.5/0_a16f8_10f47143_" id="bigimg"></div><br><br>
<img src="http://img-fotki.yandex.ru/get/6608/158970486.5/0_a16f8_10f47143_L" class="img" onClick="setBigImage(this)">
<img src="http://img-fotki.yandex.ru/get/6507/158970486.5/0_a16f9_3868a150_L" class="img" onClick="setBigImage(this)">
<img src="http://img-fotki.yandex.ru/get/6409/158970486.5/0_a16fa_81298170_L" class="img" onClick="setBigImage(this)">

лучше при ошибке выкладывайте весь код, но без лишних данных

Последний раз редактировалось lord2kim, 02.09.2012 в 22:40.

02.09.2012, 22:38

Профессор

Регистрация: 03.05.2011

Сообщений: 848

удалено

02.09.2012, 22:41

Интересующийся

Регистрация: 02.09.2012

Сообщений: 20

такие штуки легче всего писать с помощью классов и прописи нужного вам оформления в таблице стилей, то-есть происходит клик по картинке ей присваивается класс например .border_img а для етого класа уже прописано оформление в таблице стилей, когда происходит клик по другой картинке оно перебирает все картинки и ставит имя класса пустой строкой или можно другой клас присвоить или удалить. Ето особенно удобно если прописывать не только рамку выделенной картинке но и если добавлять другое оформление типо легкой прозрачности то не надо в ява скрипте это все прописывать

.hover_img_galery {
	border:1px solid #000000;
	opacity:0.4;
	filter:alpha(opacity=40);
}

<div id="small">
<a href="images/gal/1.jpg"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a>
<a href="images/gal/2.jpg"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a>
<a href="images/gal/3.jpg"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a>
<a href="images/gal/4.jpg"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a>
</div>

var iddd = document.getElementById('small'),
	imgG = iddd.getElementsByTagName('img'),
	imgL = imgG.length,
	j;
		for(j=0; j < imgL; j += 1) { 
			imgG[j].onclick = function() {
				for(var k=0; k < imgL; k += 1) {
					imgG[k].className = '';
				}
				this.className = 'hover_img_galery';
			};
		};

и еще одно прописывать стили и скрипт прямо в теге html это не правильно это не считается хорошим тоном для программиста и не соответствует идее ненавязчивого ява скрипта не сочтите за дерзость просто искренний совет, я не мега программист но может это вам поможет. Надеюсь этот пример вам поможет или по крайней мере натолкнет на какуюто другую идею.

Последний раз редактировалось Positive_fun, 02.09.2012 в 23:07.

Источник