Как поставить границу вокруг div по имени класса - PullRequest
Новая
       1

Как поставить границу вокруг div по имени класса

0 голосов
/ 02 мая 2018

Вот мой HTML-файл с несколькими элементами div, и я хочу поставить синюю рамку в каждом элементе div 

<div class="myDiv">
<p><span style="color: #00bcf4;"><strong>1) <u>Units of Measurement</u></strong></span></p>
<p><strong><em>@ K</em></strong><em>ing &nbsp;<strong>H</strong>ector&nbsp; <strong>D</strong>ied &nbsp;<strong>M</strong>ysteriously&nbsp;<strong>D</strong>rinking&nbsp;</em></p>
<span style="color: #0000ff;"><strong>&nbsp; &nbsp;K</strong>ilo&nbsp;&nbsp;<strong>H</strong>ecto&nbsp; &nbsp;<strong>D</strong>eka &nbsp;<strong>M</strong>eter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>D</strong>eci&nbsp;&nbsp;&nbsp;&nbsp;</span>
<p>&nbsp;</p>
<p><strong><em>C</em></strong><em>hoklate&nbsp;<strong>M</strong>ilk</em></p>
<span style="color: #0000ff;"><strong>C</strong>enti&nbsp;&nbsp;&nbsp;&nbsp; Milli</span>
<p>&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;</p>
</div>

<div class="myDiv">

<p><span style="color: #00bcf4;"><strong><u>2) Tens ' Multipliers</u></strong></span></p>
<p><strong><em>@ D</em></strong><em>esi&nbsp;</em>&nbsp; &nbsp;<strong><em>H</em></strong><em>ero</em>&nbsp;&nbsp;<strong><em>K</em></strong><em>illed&nbsp;<strong>M</strong>ega&nbsp;<strong>G</strong>igantic&nbsp;<strong>T</strong>errorists</em></p>
<span style="color: #0000ff;"><strong>&nbsp;&nbsp; D</strong>ekka&nbsp;&nbsp;<strong>H</strong>ecto &nbsp;<strong>K</strong>ilo&nbsp;&nbsp;<strong>M</strong>ega&nbsp;&nbsp;<strong>G</strong>iga&nbsp;&nbsp;&nbsp;&nbsp;<strong>T</strong>era</span>
<p>&nbsp; &nbsp;10<sup>1</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>2</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>3</sup>&nbsp; &nbsp;10<sup>6</sup>&nbsp;&nbsp;&nbsp;&nbsp;10<sup>9</sup>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;10<sup>12</sup></p>
<p>&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;</p>
</div>

Я пытался сделать это, но это не сработало 

<script>
function myFunction() {
    document.getElementByClassName("myDiv").style.border = "thick solid #0000FF";
}

</script>

<button type="button" onclick="myFunction()">Set border</button>

Также я бы хотел настроить функцию автоматической загрузки при загрузке страницы.

Заранее спасибо.

Ответы [ 4 ]

0 голосов
/ 02 мая 2018

Используйте jquery для установки границы каждого элемента в div (в моем случае p это элемент div) 

     <div class="mydiv">
      <p>test1</p>
      <p>test2</p>
      <p>test3</p>
      </div>

      <script>
      $(document).ready(function(){
      $(".mydiv p").css('border','1px solid red')
      });
     </script>
0 голосов
/ 02 мая 2018

Почему вы не используете CSS? 

.myDiv{
    border: thick solid #0000ff;
}

Или, если вам нужно использовать JS, используйте 

document.querySelectorAll('.myDiv').forEach( div => {
    div.style.border = 'thick solid #0000ff';
});
0 голосов
/ 02 мая 2018 
var myDivs=document.getElementsByClassName("myDiv");
for(var i=0; i<myDivs.length;i++){
    myDivs[i].style.border = "thick solid #0000FF";
}

Помните, что getElementByClassName не существует. getElementsByClassName возвращает вам HTML-коллекцию всех элементов div с классом.

0 голосов
/ 02 мая 2018

Запустите вашу функцию, когда загрузка страницы так же проста, как: 

<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function myFunction() {
            document.getElementByClassName("myDiv").style.border = "thick solid #0000FF";
        }
        </script>
    </head>
    <body onload="myFunction();">

    </body>
</html>

А для границы (используя JavaScript): 

document.getElementsById("myDiv").style.border = "thick solid #0000FF";

Предупреждение для этого getElement s ById

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...