Получить селектор CSS элемента (когда у него нет идентификатора) - PullRequest
Новая
       1

Получить селектор CSS элемента (когда у него нет идентификатора)

26 голосов
/ 03 января 2011

Я пытаюсь изменить страницу с помощью JavaScript / CSS (так же, как это делают Stylish или Greasemonkey).Это очень сложная страница (которую я не создавал или не могу изменить перед рендерингом), что затрудняет создание селектора CSS (вручную просматривая структуру документа).Как мне этого добиться?

Ответы [ 5 ]

52 голосов
/ 03 января 2011 
function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

Кажется, это то, что вы просите , но вы можете понять, что это не гарантирует уникальную идентификацию только одного элемента. (Для приведенного выше примера все входные данные одного и того же брата также будут сопоставлены.)

Редактировать : Изменен код для использования nth-child вместо классов CSS для правильного устранения неоднозначности для одного потомка.

19 голосов
/ 03 января 2011

Использовать FireFox с установленным FireBug.

  • Щелкните правой кнопкой мыши любой элемент
  • Выберите «Проверить элемент»
  • Щелкните правой кнопкой мыши элемент в дереве HTML
  • Выберите «Копировать XPath» или «Копировать путь CSS»

Вывод постоянной ссылки на этот ответ (XPath):

/ html / body / div[4] / div [2] / div [2] / div [2] / div [3] / table / tbody / tr / td [2] / table / tbody / tr / td / div / a

Путь CSS:

html body.question-page div.container div # content div # mainbar div # answers div # answer-4588287.answer таблица tbody tr td table.fw tbodytr td.vt div.post-menu a

Но в отношении этого комментария:

мое последнее намерение - создать селектор css для объекта ...

Если это ваше намерение, то через JavaScript может быть более простой способ: 

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

Последняя строка может потребоваться реализована по-разному для разных браузеров.Не тестировал.

15 голосов
/ 28 марта 2015

Я обнаружил, что на самом деле могу использовать этот код из источника chrome devtools , чтобы решить эту проблему, без особых изменений.

После добавления соответствующих методов из WebInspector.DOMPresentationUtils в новое пространство имен и исправлениянекоторые различия, я просто называю это так: 

> UTILS.cssPath(node)

Для примера реализации см. css_path.js

2 голосов
/ 21 февраля 2018

Проверьте эту библиотеку генератора селекторов CSS @ medv / finder

  • Генерирует кратчайшие селекторы
  • Уникальные селекторы на странице
  • Стабильные и надежные селекторы
  • 2,9 кБ, gzip и уменьшенный размер

Пример сгенерированного селектора: 

.blog > article:nth-child(3) .add-comment
0 голосов
/ 03 января 2011

вы можете использовать для псевдо-классов css first-child, если элемент является первым потомком в таблице div или body..etc

Вы можете использовать функцию jquery nth child ().

http://api.jquery.com/nth-child-selector/

пример с jquery.com 

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

мои 2 цента, если я правильно понял вопрос.

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

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

...