Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
96 / 30 / 20
Регистрация: 17.09.2014
Сообщений: 1,393
1

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

08.01.2018, 08:50. Показов 944. Ответов 3
Метки нет (Все метки)

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

Это она:
Кликните здесь для просмотра всего текста
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.
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.01.2018, 08:50
Ответы с готовыми решениями:

Добавить блоку css стили
Есть такой код: scrollStart = 200; $(window).scroll(function(){ var scroll =...

Как поменять стили css?
Добрый день всем форумчанам! у меня такой вопрос, как при помощи getelementbyid изменить несколько...

Как заменить стили через javascript? А не добавить новый слой
Нужно при нажатии полностью меня стили (бордер, цвет, положение и прочее). Стили заданы через айди...

Задать id стили css
Есть например форма на ней кнопка, если в объект загружено что то, необходимо поменять стили CSS у...

3
28 / 22 / 15
Регистрация: 29.11.2017
Сообщений: 75
08.01.2018, 09:29 2
Лучший ответ Сообщение было отмечено артист как решение

Решение

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);
1
96 / 30 / 20
Регистрация: 17.09.2014
Сообщений: 1,393
09.01.2018, 02:39  [ТС] 3
А можно как-нибудь удалить параметр 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")
0
28 / 22 / 15
Регистрация: 29.11.2017
Сообщений: 75
09.01.2018, 02:40 4
Лучший ответ Сообщение было отмечено артист как решение

Решение

Или так
Javascript
1
document.querySelector('input[src^="http://erte/enter.jpg"]').setAttribute('src', '');
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.01.2018, 02:40

Не работают стили css в js-коде
Здравствуйте! Подскажите пожалуйста, что может быть за проблема, что когда я использую javascript...

execCommand('formatBlock') и стили из css
Ситуация следующая - имеется простенький визуальный редактор HTML написанный на JavaScript под IE -...

JavaScript - innerHTML и CSS - Не обновляются стили после вставки текста
Приветствую! Если что-то делаю неправильно, пожалуйста поправьте меня. Заранее спасибо за ответы....

в классе поменять свойства css и добавить новое
как в классе поменять свойства? Чтоб добавлялось изменение только в классе. например есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru