Как изменить стиль CSS с помощью Javascript, чтобы ссылки были идентичны нормальному тексту?

Question

Как вы уже знаете, ссылки уменьшают читаемость в онлайн-тексте. Это особенно заметно в таких статьях, как статьи в науке о Википедии, где каждый другой термин викилизуется и, следовательно, ярко-синим. Я пытаюсь создать аддон Firefox с кнопкой переключения, что делает ссылки нормальными.

Кажется разумным, что был бы один слой с поддержкой Javascript, который изменяет CSS-стиль ссылок в тексте тела в соответствии с тем, что лежит в основе основного текстового стиля. Правильно ли я в этом предположении? Если так, то, что это? Если нет, то какой самый простой способ сделать это?

Answer 1

Вы должны быть в состоянии сделать это несколькими способами. Хотя я не собираюсь делать эту линию. Я бы, наверное, начал с getElementByTagName, если бы я не хотел загружать или предполагать предварительную загрузку jQuery.

var anchors = document.getElementsByTagName('a'); 
anchors = Array.prototype.slice.call(anchors); 
anchors.forEach(function (anchor) { 
    anchor.style.textDecoration = 'none'; 
    anchor.style.color = 'black'; // to taste 
    // et. al. You'll need to define these CSS rules. 
}); 

Вы, возможно, потребуется сделать некоторые проверки, чтобы убедиться, что они на самом деле в тексте вашей статьи, а не якорей из навигационного меню, боковой панели или колонтитула.

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

Array.prototype.forEach.call(document.getElementsByTagName('a'), function (anchor) {/* CSS */}); 

Answer 2

If ванильным JS:

var links = document.getElementsByTagName('a'); 
for(var i=0;i<links.length;i++){ 
    links[i].style.appearance = 'none'; 
} 

PS Я не тестировал редактирование этого кода.

Answer 3

Применяя следующие стили должны сделать:

a { 
    color: inherit !important; 
    text-decoration: inherit !important; 
} 

Вы можете применить эти стили для всех веб-страниц using nsIStyleSheetService. Если вы хотите применить их только к одной веб-странице, вы должны ввести вместо нее тег <style>.

Answer 4

использовать nsIStyleSheetSercie, как и рекомендовал wlad сделать это. просто запустите это при запуске, убедитесь, что CssUri является глобальной переменной, то при выключении запуска функции UNREGISTER

var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService); 
var ios = Components.classes['@mozilla.org/network/io-service;1'].getService(Components.interfaces.nsIIOService); 
var css = 'a {color: inherit !important; text-decoration: none !important; }'; 
//var cssEnc = 'data:text/css;base64,' + window.btoa(css); 
var cssEnc = encodeURIComponent(css); 
var cssUri = makeURI('data:text/css,' + cssEnc); 
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET); 
//when want to unregister run this: 
//sss.unregisterSheet(cssUri, sss.USER_SHEET); 

это будет применять таблицы стилей для всех сайтов. я спросил wlad в комментарии ниже, как сделать это сайт speicif, используя @document