Можно ли определить атрибут заголовка по имени класса? - PullRequest
Новая
       25

Можно ли определить атрибут заголовка по имени класса?

6 голосов
/ 08 августа 2011

Я бы хотел, чтобы у всех .note элементов была определенная подсказка.

Возможно ли сделать это автоматически, например, в CSS? Так же, как класс note имеет цвета и определенный шрифт, возможно ли связать текст всплывающей подсказки (атрибут title) с этим классом?

Я мог бы создать некоторую функцию, которая будет перебирать все элементы .note и добавлять атрибут title, если его еще нет. Однако, поскольку мне не нужно выполнять итерации вручную для стилей CSS, мне было интересно, есть ли более элегантное решение этой проблемы (например, возможно ли определить его в CSS?).

Ответы [ 5 ]

11 голосов
/ 08 августа 2011

Вы не можете изменить атрибуты элемента с помощью CSS; Вы могли бы, возможно, эмулировать функциональность title, хотя (хотя и неуклюже): 

.note {
    position: relative;
}

.note:after {
    content: "The alternate 'pseudo-title' text for the .note elements.";
    position: absolute;
    left: 50%;
    background-color: #000;
    color: #fff;
    }

JS Fiddle demo .

Однако использование этого параметра по-прежнему позволит отобразить исходный title, поэтому я рекомендую удалить этот атрибут с помощью JavaScript (или на языке сервера).

Возможный метод удаления заголовка JavaScript: 

var notes = document.getElementsByClassName('note');
var notesNum = notes.length;

for (i=0; i<notesNum; i++){
    notes[i].removeAttribute('title');
}

Демонстрация JS Fiddle (объединение двух подходов) .

<ч />

Отредактировано , как OP, из комментариев (ниже) не хочет изменять существующий внешний вид, чтобы добавить опцию JavaScript для назначения нового заголовка для всех элементов с именем класса из note: 

var notes = document.getElementsByClassName('note');
var notesNum = notes.length;
var newTextForNotesClass = "This is the new title text for the notes-class-name group.";

for (i=0; i<notesNum; i++){
    notes[i].title = newTextForNotesClass;
}

JS Fiddle demo .

9 голосов
/ 08 августа 2011

Это не то, что входит в сферу CSS.Лучше всего использовать JavaScript или JQuery.

5 голосов
/ 08 августа 2011

Когда вы задали вопрос, например, " CSS ', я предполагаю, что вы хотите получить ответ о том, как использовать класс для назначения заголовка. Как и другие ответы, jQuery или javascript - ваш лучший выбор.

С помощью jQuery вы можете сделать: 

tooltip = "Tooltip Text";
$('.note').attr('title', tooltip);

Вот скрипка с примером: http://jsfiddle.net/RdNvy/

2 голосов
/ 08 августа 2011

Я не уверен, но попробуйте получить доступ к свойству css "content". http://www.w3schools.com/cssref/pr_gen_content.asp

2 голосов
/ 08 августа 2011

CSS для стилей, а не для проведения действий; вам понадобится JavaScript для такого рода вещей. Вы можете использовать document.getElementsByClassName, чтобы получить массив, который вы можете использовать для циклической установки этих атрибутов заголовка.

...