Как изменить css по названию документа?

199
13 марта 2018, 00:54

Возможо ли изменить css по названию документа, например:

index.html a {color:orange;}

или

$('index.html a').css({'color':'orange'});
Answer 1

Через CSS нельзя (не существует такого селектора), а через JS - легко:

  1. Получаете часть URL после имени хоста, через document.location.pathname;
  2. Проверяете наличие вашего паттерна в pathname, используя любой удобный метод проверки вхождения подстроки;
  3. Применяете стили (через инжект CSS-файла / созданием элемента <style> / через свойство style для отдельных элементов).

Простой пример:

let test = document.getElementById('test'), 
    pageName = document.location.pathname; 
console.log('pageName (у здешних вставок кода оно всегда "/js"): ' + pageName); 
 
 
test.addEventListener('click', () => { 
  // это условие вернет false (т.к. в пути не содержится 'search') и стиль применен не будет 
  if(pageName.indexOf('search') !== -1) 
    test.style.borderRadius = '50px';  
 
  // а тут условие выполняется, и фоновый цвет изменится на зеленый 
  if(pageName.indexOf('js') !== -1) 
    test.style.backgroundColor = '#4a4'; 
});
#test { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red; 
  cursor: pointer; 
}
Кликните по элементу для применения стилей 
<div id="test"></div>

Когда требуется гибкость, вместо indexOf (который тут использован для простоты) при сравнении можно использовать регулярное выражение, например /^\/articles\/[\w-]+?.php/i.

Answer 2

var s = document.getElementsByTagName("title")[0]; 
var test = document.getElementById("test"); 
 if(s.dataset.file == "index.html"){ 
 	test.style.color = "red"; 
 } else { 
 	test.innerText ="Что-то не работает этот скрипт"; 
 }
<head> 
<meta charset="utf-8"> 
<title data-file="index.html">Test</title> 
</head> 
<body> 
<div id="test">Test</div> 
</body>

Вообщем, логика такова: нужно как-то пометить нужную страницу. Я это сделал, добавив в тег title дополнительный атрибут с названием файла.

READ ALSO
Как разместить знак в конце елемента списка?
CSS

Как разместить знак в конце елемента списка?

 252
Почему не работает значение max-width?
CSS

Почему не работает значение max-width?

на сайте https://smartbalanceonline стоит плагин Buy one click WooCommerce

 181
html css video как изменить размер непропорционально?
CSS

html css video как изменить размер непропорционально?

Есть элемент видео:

 230
Как правильно обратиться к классу в моем случае (BEM)?
CSS

Как правильно обратиться к классу в моем случае (BEM)?

Написал для наглядности часть меню с выпадающим списком, хочу понять следующее:

 168