Удаления блока стилей из тела страницы

@Terk · Регистрация: 31.07.2015

Студворк — интернет-сервис помощи студентам

Добрый день, дорогие форумчане, может и вечер для кого)
Прошу помощи в вопросе, возникла необходимость на стороне клиента который просматривает сайт выполнять скрипт который сканирует тело страницы на наличие определенного значения в блоке <style>...</style> и при совпадении удаляет полностью данный блок из тела. Пока что дошел лишь до такого кода

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
setTimeout (function gadost (){
    if (document.getElementsByTagName('style')[0].innerHTML.match("z-index: 2147483647 !important;") > '0') {
    document.getElementsByTagName('style')[2].parentNode.removeChild(document.getElementsByTagName('style')[0]);
    }
    if (document.getElementsByTagName('style')[1].innerHTML.match("z-index: 2147483647 !important;") > '0') {
    document.getElementsByTagName('style')[1].parentNode.removeChild(document.getElementsByTagName('style')[1]);
    }
    if (document.getElementsByTagName('style')[2].innerHTML.match("z-index: 2147483647 !important;") > '0') {
    document.getElementsByTagName('style')[2].parentNode.removeChild(document.getElementsByTagName('style')[2]);
    }
    setTimeout(function() {gadost();}, 5000);
}, 2000)

Вопрос в том, можно ли сделать функцию например такого типа

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
if (document.getElementsByTagName('style')[n+1].innerHTML.match("z-index: 2147483647 !important;") > '0') {
    document.getElementsByTagName('style')[n+1].parentNode.removeChild(document.getElementsByTagName('style')[n+1]);
    }

дабы проверить все блоки <style>...</style> даже если их более 3х, будет ли это кроссбраузерно, и не проще ли просто продублировать if - ы до 10 шт, что бы было с запасом?
Или возможно есть более простой способ удалить блок из тела страницы который содержит данный текст?

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

@klopp · 06.04.2018, 06:31

JavaScript
1
2
3
4
5
6
7
let styles = document.getElementsByTagName('style');
for(let i = 0; i < styles.length; i++){
    if(styles[i].innerHTML.indexOf('z-index: 2147483647 !important;') != -1){
        styles[i].remove(); 
        i--;
    }
}

ES6

JavaScript
1
2
let styles = [...document.getElementsByTagName('style')];
styles.map(el => el.innerHTML.includes('z-index: 2147483647 !important;') ? el.remove() : false);

@Terk · 06.04.2018, 11:17 **[ТС]**

Огромное спасибо) А если не сложно вы можете раскомментировать код, хотелось бы понимать что к чему.

Добавлено через 1 час 14 минут
Гм.. а такой вопрос еще к знающим, возможно ли не очищать блок стилей, и изменить искомое значение? т.е сделать например z-index: 0 !important; ?? Или найти

CSS
1
2
z-index: 2147483647 !important;
    top: 0px !important;

и заменить

CSS
1
2
z-index: 2147483647 !important;
    top: -380px !important;

Правда данный текст не получается найти видимо по причине присутствия там переноса.Честно говоря с заменой я абсолютно не смог создать решение, и прошу хотя бы намек дать в какую сторону копать?

@diadiavova · 06.04.2018, 12:06

Terk, доступ к коллекции стилей можно получить с помощью document.styleSheets. Если надо искать правило стиля по точному значению, как в твоем примере, то можно сделать это так

JavaScript
1
let rule = Array.from(document.styleSheets[0].cssRules).find(r => r.style.cssText == "z-index: 2147483647 !important; top: 0px !important;");

Если правило надо искать во всех стилях,то вместо document.styleSheets[0] надо обойти коллекцию в цикле. Далее с переменной rule можно работать так

JavaScript
1
rule.style.top = "10px";

И так далее.

@Terk · 06.04.2018, 12:50 **[ТС]**

diadiavova, мм, при копипасте данного кода в консоль выдается ошибка

Code
1
2
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at <anonymous>:1:47

Как я понимаю в указанных данных обработчик не видит текста стилей?

@diadiavova · 06.04.2018, 12:57

Terk, ты в заголовке темы указал, что тебе надо удалить правило. Я приведу пример как раз с поиском и удалением правила.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        .sss {
            z-index: 2147483647 !important;
            top: 0px !important;
        }
 
        .red {
            color: red;
        }
    </style>
</head>
 
<body>
 
    <div class="red">qwerty</div>
    <button onclick="delRed();">Del red</button>
    <script>
 
        function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); // Получаем массив правил
            let rule = rules.find(r => r.style.color == "red"); // Находим первое из тех, у которых color = red
            let index = rules.indexOf(rule); // определяем индекс правила в таблице
            document.styleSheets[0].deleteRule(index); // удаляем правило
        }
 
    </script>
</body>
 
</html>

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

@Terk · 06.04.2018, 13:19 **[ТС]**

diadiavova, гм.. все равно не работает, большое спасибо за участие, но лучше наверно будет создать новую тему?) поскольку ответ на вопрос заданный изначально вопрос дали во втором сообщении.

Кликните здесь для просмотра всего текста

@diadiavova · 06.04.2018, 13:30

Сообщение от Terk

все равно не работает

Из того, что я попробовал, не работает это только в IE по вполне понятным причинам. Что за браузер?

@Terk · 06.04.2018, 13:56 **[ТС]**

diadiavova, хром, извиняюсь, нашел свой косяк.

CSS
1
2
3
4
5
6
.red {
            color: red !important;
            z-index: 2147483647 !important;
            position: fixed;
            top: 30px !important;
        }

JavaScript
1
2
3
4
5
6
7
function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); 
            let rule = rules.find(r => r.style.zIndex == "2147483647 !important"); // также не находит при указании без !important
            let index = rules.indexOf(rule); 
            rule.style.top="60px"; 
        }

JavaScript
1
2
3
4
5
6
7
function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); 
            let rule = rules.find(r => r.style.color == "red"); 
            let index = rules.indexOf(rule); 
            rule.style.top="60px"; 
        }

однако в данном случае red находит, z-index не находит.. возможно я неверно указываю параметр z-index ?

@diadiavova · 06.04.2018, 14:06

Сообщение от Terk

нашел свой косяк.

Интересуюсь любопытства ради: как можно допустить косяк в готовом документе, который надо было просто сохранить и открыть?

Сообщение от Terk

возможно я неверно указываю параметр z-index ?

Там просто число надо указать. Если хочешь увидеть !importent, тогда придется работать с cssText и разбирать его. Или если ты знаешь, какое по счету нужное правило, то можешь просто указать индекс.

JavaScript
1
document.styleSheets[0].deleteRule(0);

@Terk · 06.04.2018, 14:33 **[ТС]**

diadiavova,

Интересуюсь любопытства ради: как можно допустить косяк в готовом документе, который надо было просто сохранить и открыть?

нуу.. если вы позволите я не стану раскрывать особенности данного скилла)

Если не сложно проясните пожалуйста код

JavaScript
1
2
3
4
5
6
7
function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); // тут объявляем переменную в которую записываем все стили
            let rule = rules.find(r => r.style.color == "red"); // ищем блок со стилями который содержит указанный атрибут
            let index = rules.indexOf(rule); // здесь все логично это индекс найденного правила, необходимо для удаления через document
            rule.style.top="60px"; // тут указываем что в блоке со стилями, переменная "rule", необходимо стилю "top" задать значение 60px
         }

Однако все то же самое не работает в отношении zIndex т.е если искать по значению атрибута z-index то код не работает
тогда как например при поиске по атрибуту position все работает отлично

JavaScript
1
2
3
4
5
6
7
function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); 
            let rule = rules.find(r => r.style.position == "fixed"); 
            let index = rules.indexOf(rule); 
            rule.style.top = "60px";
        }

т.е видимо обработчик не понимает что такое zIndex хотя регистр соблюдается.. и это меня немножко вводит в недоумение.

@diadiavova · 06.04.2018, 14:43

Сообщение от Terk

Однако все то же самое не работает в отношении zIndex т.е если искать по значению атрибута z-index то код не работает

Я ведь выше написал об этом.

Сообщение от diadiavova

Там просто число надо указать.

Ну просто на моей тестовой страничке запусти такой код и посмотри что он выдаст

JavaScript
1
alert(document.styleSheets[0].cssRules[0].style.zIndex);

Вот по такому значению и ищи.

@Terk · 06.04.2018, 14:47 **[ТС]**

diadiavova, Так в том то и дело что я указывал именно число, т.е код

JavaScript
1
2
3
4
5
6
7
function delRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules); 
            let rule = rules.find(r => r.style.zIndex == "2147483647"); 
            let index = rules.indexOf(rule); 
            rule.style.top = "60px";
        }

И тем не менее он не работает.

@diadiavova · 06.04.2018, 14:58

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

Добавлено через 25 секунд

Сообщение от Terk

И тем не менее он не работает.

сейчас попробую

Добавлено через 7 минут
Terk, вот добавил кода в страничку. У меня то правило где есть зиндекс также содержит цвет и при нажатии на кнопку set red сначала правило находится по зиндексу, а потом в этом правиле меняется цвет(для наглядности)

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        .sss {
            z-index: 2147483647 !important;
            top: 0px !important;
            color: blue;
        }
 
        .red {
            color: red;
        }
    </style>
</head>
 
<body>
<div class="sss">asdf</div>
    <div class="red">qwerty</div>
    <button onclick="delRed();">Del red</button>
    <button onclick="setRed();">Set red</button>
    <script>
        function delRed()
        {
            let rules = Array.prototype.map.call(document.styleSheets[0].cssRules, function (r) { return r; });
            let rule = rules.filter(function (r) { return r.style.color == "red" })[0];
            let index = rules.indexOf(rule);
            document.styleSheets[0].deleteRule(index);
        }
 
        function setRed()
        {
            let rules = Array.from(document.styleSheets[0].cssRules);
            let rule = rules.find(r => r.style.zIndex == "2147483647" );
            console.log(rule);
            rule.style.color = "red";
        }
    </script>
</body>
 
</html>

Добавлено через 2 минуты
Terk, я надеюсь, что ты в курсе, что изменение свойства top не при всех значениях position будет иметь эффект?

@Terk · 06.04.2018, 23:58 **[ТС]**

diadiavova, боже, я идиот чес слово, при редактировании вашего кода я изменил стиль red добавил туда свойства position, top, и пр. однако из стилей sss z-index я не удалил, по этой причине у меня и не работал код...
Спасибо вам за подробное объяснение) И за терпеливость)

Добавлено через 7 часов 19 минут
diadiavova, если не сложно оцените пожалуйста код, и скажите насколько корректен данный код?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    for(let i = 0; i < document.styleSheets.length; i++){
    try {
    if(!!!Array.from(document.styleSheets[i].cssRules).find(r => r.style.zIndex == "2147483647" )){
        
    }
    else {
        document.getElementsByTagName('html')[0].removeAttribute('style');
        let rules = Array.from(document.styleSheets[i].cssRules); 
        let rule = rules.find(r => r.style.zIndex == "2147483647" );
        rule.style.top = "-90px";
        i=document.styleSheets.length;
    }
    }catch (e) {
    }
    };

Добавлено через 1 час 26 минут
Гм, не работает в лисичке..

@diadiavova · 07.04.2018, 01:23

Сообщение от Terk

насколько корректен данный код?

Корректен он ровно настолько, насколько правильно работает.

Насчет необходимости блока трай-кэтч сказать не могу, если возникают непредвиденные ошибки, из-за которых выполнение обрывается, то надо, но в любом случае блок кэтч оставлять пустым не стоит. Надо вывести инфу в консоль, иначе не будешь знать из-за чего проблема, если она возникнет.

Оставлять пустым if - еще более странно. Вместо этого изменить условие на противоположное и else не понадобится. Для чего нужно три восклицательных знака - мне непонятно, хотя, возможно, я чего-то не знаю. Учитывая, что условие лучше поменять на противоположное, логично будет оставить два, но в принципе, в таких ситуациях языковой движок сам приводит результат выражения к булевому типу, так что это там не понадобится.

Поиск нужного стиля здесь выполняется дважды, смысла в этом нет, надо выполнить его перед блоком иф.

document.getElementsByTagName('html')[0] - вместо этого можно использовать document.documentElement. А вместо этого i=document.styleSheets.length; - break;.

В итоге получается что-то вроде такого

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        for (let i = 0; i < document.styleSheets.length; i++)
        {
            try
            {
                let rule = Array.from(document.styleSheets[i].cssRules).find(r => r.style.zIndex == "2147483647");
                if (rule)
                {
                    document.documentElement.removeAttribute('style');
                    rule.style.top = "-90px";
                    break;
                }
            } 
            catch (e)
            {
                console.log(e);
            }
        };

Сообщение от Terk

Гм, не работает в лисичке..

Должно работать. Я в основном в ней все запускаю. Да и нет тут ничего такого, что лиса не понимает.

Добавлено через 13 минут
По поводу лисы. Когда в блок кэтч добавишь логирование, можно будет посмотреть из-за чего. Но тут была такая история: когда на форуме добавили функцию подсветки строк на страницах разделов, меня она сильно раздражала и я написал вот такой скрипт, чтобы от этого избавиться Обсуждение темы Userscripts для форума - О форуме - Страница 5 - Киберфорум, если ты его посмотришь, то заметишь, что он использует те же приемы, что обсуждаются здесь. Но через какое-то время я заметил, что скрипт перестал работать. Начал разбираться и выяснил, что дело в изменениях в политике безопасности. Там то ли стили с другого домена недоступными стали, то ли что-то в этом роде и это именно в лисе. Решил я проблему следующим образом
Обсуждение темы Userscripts для форума - О форуме - Страница 6 - Киберфорум. В двух словах: вместо модификации стиля, я добавил в документ новый, в него ввел правило с точно таким же селектором, какой хотел отредактировать и задал ему нужное значение нужного свойства. Поскольку у этого стиля более высокий приоритет, от просто затенил то правило, которое пришло с сервера. Если окажется, что здесь та же проблема, то можно решить ее также.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Terk 0 / 0 / 0 Регистрация: 31.07.2015 Сообщений: 42
	06.04.2018, 13:19 [ТС]
	diadiavova, гм.. все равно не работает, большое спасибо за участие, но лучше наверно будет создать новую тему?) поскольку ответ на вопрос заданный изначально вопрос дали во втором сообщении. Кликните здесь для просмотра всего текста 0

Удаления блока стилей из тела страницы

Решение