Как добавить другое определение украшения текста с помощью Javascript?

Question

Я хочу добавить еще один класс оформления текста с помощью JavaScript на ссылку, которая уже имеет связанный с ней класс.

Я хочу что-то вроде <a> активированной ссылки должно иметь text:decoration=none, но я не могу это сделать с помощью CSS, потому что он применяется ко всем ссылкам, тогда, если я объявляю новый класс без украшения.

Как это возможно с JavaScript?

Answer 1

Вы можете сделать это следующим образом:

var elem = document.getElementById('ELEMENT_ID_HERE'); 
elem.style.textDecoration = 'none'; 

Answer 2

Если вы хотите использовать классы CSS:

var element = document.getElementById(idOfElement); 
element.className = element.className + " noDecorationClass"; 

Это добавляет новый класс к элементу, вы можете также переписать существующий.

element.className = "noDecorationClass"; 

Answer 3

Я бы рекомендовал использовать фреймворк как mootools (http://mootools.net/).

С рамками его так же просто, как:

element.addClass('my_new_css_class'); 

или вы можете просто добавить новый стиль

element.setStyle('text-decoration', 'none'); 

Answer 4

Если вы установили уникальный идентификатор для всех ссылок, которые вы используете, а затем обратитесь к ссылку в вашем скрипте вы можете изменить, какие ссылки вы хотите изменить:

document.getElementById('YourLinksId').style.textDecoration = 'overline'; 
document.getElementById('yourLinksId').onmouseover.style.textDecoration = 'blink'; 

Стиль, который вы задаете напрямую В этом случае элемент будет переопределять любые атрибуты, заданные в классе css.

Редактировать: Извините, я думаю, что неправильно понял ваш вопрос. Если вы имеете в виду активируется, когда связь была нажата, Mouseover т.д. Вы можете сделать следующее:

a:link {color: #FF0000}  /* unvisited link */ 
a:visited {color: #00FF00} /* visited link */ 
a:hover {color: #FF00FF} /* mouse over link */ 
a:active {color: #0000FF} /* selected link */ 

Больше ресурсов на w3schools

Answer 5

Активная ссылка активна только во время ее нажатия на.

Как только вы отпустите кнопку мыши, оно больше не имеет активное состояние. Поэтому вы можете использовать a: active, который относится к всем ссылкам, так как только один из них будет активен одновременно.

Я предполагаю, что вы действительно хотите, чтобы он сохранил ваше текстовое украшение: нет, пока не будет нажата другая ссылка, в этом случае вам понадобится JavaScript. Если я ошибаюсь, просто следуйте примеру @ ChrisAD, но добавьте:

a:active {color: #0000FF; 

    text-decoration: none; 

} /* selected link */