как поменять стилевые свойства только у элементов списка где есть "http" через js

Question

<div class="block">
            <ul>
               <li><a href="index.html">index.html</a></li>
               <li><a href="http://google.com">http://google.com</a></li>
               <li><a href="http://itstep.by">http://itstep.by</a></li>
               <li><a href="local/path">local/path</a></li>
               <li><a href="http://mustat.itstep.org">http://mustat.itstep.org</a>ства </li>
            </ul>
         </div>


let links = document.querySelectorAll('ul a:not([href^="http"])');
console.log(links);
links.forEach(function(el) {
    el.style.borderBottom = '1px solid black';
});

Answer 1

Чтобы задать стили ссылкам содержащим http:// a[href*="http://"] {}

Чтобы задать стили ссылкам начинающимся на http:// a[href^="http://"] {}

Пример css и js:

let links = document.querySelectorAll('ul a[href*="http://"]');
console.log(links);
links.forEach(function(el) {
  el.style.borderBottom = '1px solid black';
});

a[href*="http://"] {
  color: #000;
}

<div class="block">
  <ul>
    <li><a href="index.html">index.html</a></li>
    <li><a href="http://google.com">http://google.com</a></li>
    <li><a href="http://itstep.by">http://itstep.by</a></li>
    <li><a href="local/path">local/path</a></li>
    <li><a href="http://mustat.itstep.org">http://mustat.itstep.org</a>ства </li>
  </ul>
</div>

Подробнее про селектор атрибута почитать тут...

БЛОГ НА HUSL

как поменять стилевые свойства только у элементов списка где есть "http" через js

Ответы (1 шт):