Как добавить стили CSS?

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

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

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

Это она:

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    </head>
    <body class="body">
        <table style="width:133px; height:52px;" border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td align="center">
                    <div class="entergame"> 
                        <input type="image" src="http://erte/enter.jpg" title="Кнопка!">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

А так должна быть:

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <style type="text/css">
            .entergame {width: 133px; float: left; margin: 0px 0;}
            .entergame li {float: left; list-style-type: none; position: relative;}
            .entergame a {float: left; height: 52px; overflow: hidden; position: relative;}
            .entergame span {background-position: left top; background-repeat: no-repeat; cursor: pointer; display: block; height: 52px; left: 0; position: absolute; top: 0; width:133px;}
            .entergame a:hover {visibility: visible;}
            .entergame a:hover span {background-position: left bottom;}
        </style>
    </head>
    <body class="body">
        <table style="width:133px; height:52px;" border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td align="center">
                    <div class="entergame"> 
                        <input type="submit" value="" target = "_blank" title="Кнопка!">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

Начал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function main()
{
    var a = document.querySelector('input[src^="http://erte/enter.jpg"]')
    if(a == null) return
        
    a.type = "submit"
        
    a = a.parentElement
    
    a.style.width = 133px
    a.style.float = left
    a.style.margin = 0px 0
}
document.addEventListener('DOMContentLoaded', main)

Всё забыл уже(даже синтаксис), что-то не вкурю, как быть с
.entergame li.

@МихаилБасов · 08.01.2018, 09:29

JavaScript
1
2
3
4
5
6
7
8
9
10
const createElm = document.createElement('style');
createElm.type = 'text/css';
createElm.innerHTML = `.entergame {width: 133px; float: left; margin: 0px 0;}
.entergame li {float: left; list-style-type: none; position: relative;}
.entergame a {float: left; height: 52px; overflow: hidden; position: relative;}
.entergame span {background-position: left top; background-repeat: no-repeat; cursor: pointer; display: block; height: 52px; left: 0; position: absolute; top: 0; width:133px;}
.entergame a:hover {visibility: visible;}
.entergame a:hover span {background-position: left bottom;}`;
 
document.getElementsByTagName('head')[0].append(createElm);

@артист · 09.01.2018, 02:39 **[ТС]**

А можно как-нибудь удалить параметр src у инпута?

Так элемент выглядит изначально:

HTML5
1
<input type="image" src="http://erte/enter.jpg" title="Кнопка!">

Это после скрипта:

HTML5
1
<input type="submit" value = "" src="" title="Кнопка!">

Скрипт:

JavaScript
1
2
3
4
5
6
a = document.querySelector('input[src^="http://erte/enter.jpg"]')
if(a == null) return
        
a.type = "submit"
a.value = ""
a.src = ""

Этого параметра у submit вообще нет.

Добавлено через 10 минут

JavaScript
1
delete a.src

Не работает...

Добавлено через 4 минуты
Нашел:

JavaScript
1
a.removeAttribute("src")

@МихаилБасов · 09.01.2018, 02:40

Или так

JavaScript
1
document.querySelector('input[src^="http://erte/enter.jpg"]').setAttribute('src', '');

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Как добавить стили CSS?

Решение

Решение