Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 03.03.2019
Сообщений: 206
1

Динамически создать кнопку с картинкой

04.01.2021, 17:12. Просмотров 812. Ответов 1
Метки нет (Все метки)

Здраствуйте, етот код создает кнопку с картинкой и текстом,
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<button class="myButton" onClick="blue(this)">
<svg width="50%" height="50%" viewBox="0 0 21 15" fill="black" xmlns="http://www.w3.org/2000/svg">
  <path d="M0.0454712 12.7188C0.0454712 13.3569 0.310509 13.969 0.782281 14.4202C1.25405 14.8715 1.89391 15.125 2.5611 15.125H17.6548C18.322 15.125 18.9619 14.8715 19.4337 14.4202C19.9054 13.969 20.1705 13.3569 20.1705 12.7188V6.10156H0.0454712V12.7188ZM3.01031 9.45312C3.01031 9.11124 3.1523 8.78337 3.40503 8.54162C3.65777 8.29987 4.00055 8.16406 4.35797 8.16406H6.51422C6.87164 8.16406 7.21442 8.29987 7.46716 8.54162C7.71989 8.78337 7.86188 9.11124 7.86188 9.45312V10.3125C7.86188 10.6544 7.71989 10.9823 7.46716 11.224C7.21442 11.4658 6.87164 11.6016 6.51422 11.6016H4.35797C4.00055 11.6016 3.65777 11.4658 3.40503 11.224C3.1523 10.9823 3.01031 10.6544 3.01031 10.3125V9.45312Z" />
  <path d="M17.6548 0H2.5611C1.89391 0 1.25405 0.253515 0.782281 0.704774C0.310509 1.15603 0.0454712 1.76807 0.0454712 2.40625V3.52344H20.1705V2.40625C20.1705 1.76807 19.9054 1.15603 19.4337 0.704774C18.9619 0.253515 18.322 0 17.6548 0Z"/>
</svg>
<span>карта</span> </button>
</body>
<style>
.myButton {
    width: 10vmin;
    height: 10vmin;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
</style>
<script>
//динамически    
</script>
</html>
Просто создать кнопку можно через
Javascript
1
2
3
4
5
var options = document.getElementById("options");
let dunButton = document.createElement("button");
    dunButton.classList.add("dunamicButton");
    options.appendChild(dunButton);
dunButton.innerHTML = `<span>${"123"}</span>`;
Но как поместить туда svg?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.01.2021, 17:12
Ответы с готовыми решениями:

Динамически создать кнопку
1.Добавьте в меню пункт «Новая копка». При выборе этого пункта меню в правой нижней части формы...

Создать динамически кнопку
Помогите динамически создать кнопку двойным нажатием левой кнопки мышки

Как динамически создать кнопку?
Подскажите пожалуйста, как мне сделать кнопку &quot;Далее&quot; на форме?

Динамически создать кнопку и подписать ее на событие
Создать кнопку «newbutton1», при нажатии на которую создается справа от нее создается другая кнопка...

1
5310 / 2048 / 604
Регистрация: 11.04.2015
Сообщений: 3,487
Записей в блоге: 41
05.01.2021, 11:56 2
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
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
</head>
 
<body>
    <button class="myButton" onClick="blue(this)">
        <svg width="50%" height="50%" viewBox="0 0 21 15" fill="black" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0.0454712 12.7188C0.0454712 13.3569 0.310509 13.969 0.782281 14.4202C1.25405 14.8715 1.89391 15.125 2.5611 15.125H17.6548C18.322 15.125 18.9619 14.8715 19.4337 14.4202C19.9054 13.969 20.1705 13.3569 20.1705 12.7188V6.10156H0.0454712V12.7188ZM3.01031 9.45312C3.01031 9.11124 3.1523 8.78337 3.40503 8.54162C3.65777 8.29987 4.00055 8.16406 4.35797 8.16406H6.51422C6.87164 8.16406 7.21442 8.29987 7.46716 8.54162C7.71989 8.78337 7.86188 9.11124 7.86188 9.45312V10.3125C7.86188 10.6544 7.71989 10.9823 7.46716 11.224C7.21442 11.4658 6.87164 11.6016 6.51422 11.6016H4.35797C4.00055 11.6016 3.65777 11.4658 3.40503 11.224C3.1523 10.9823 3.01031 10.6544 3.01031 10.3125V9.45312Z" />
            <path
                d="M17.6548 0H2.5611C1.89391 0 1.25405 0.253515 0.782281 0.704774C0.310509 1.15603 0.0454712 1.76807 0.0454712 2.40625V3.52344H20.1705V2.40625C20.1705 1.76807 19.9054 1.15603 19.4337 0.704774C18.9619 0.253515 18.322 0 17.6548 0Z" />
        </svg>
        <span>карта</span> </button>
        <div id="options"></div>
</body>
<style>
    .myButton {
        width: 10vmin;
        height: 10vmin;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
</style>
<script>
    function addButton()
    {
        var options = document.getElementById("options");
        let dunButton = document.createElement("button");
        let svgns = "http://www.w3.org/2000/svg";
        let svg = document.createElementNS(svgns, "svg");
        svg.setAttribute("width", "50%");
        svg.setAttribute("height", "50%");
        svg.setAttribute("fill", "black");
        svg.setAttribute("viewBox", "0 0 21 15");
        let path1 = document.createElementNS(svgns, "path");
        path1.setAttribute("d", "M0.0454712 12.7188C0.0454712 13.3569 0.310509 13.969 0.782281 14.4202C1.25405 14.8715 1.89391 15.125 2.5611 15.125H17.6548C18.322 15.125 18.9619 14.8715 19.4337 14.4202C19.9054 13.969 20.1705 13.3569 20.1705 12.7188V6.10156H0.0454712V12.7188ZM3.01031 9.45312C3.01031 9.11124 3.1523 8.78337 3.40503 8.54162C3.65777 8.29987 4.00055 8.16406 4.35797 8.16406H6.51422C6.87164 8.16406 7.21442 8.29987 7.46716 8.54162C7.71989 8.78337 7.86188 9.11124 7.86188 9.45312V10.3125C7.86188 10.6544 7.71989 10.9823 7.46716 11.224C7.21442 11.4658 6.87164 11.6016 6.51422 11.6016H4.35797C4.00055 11.6016 3.65777 11.4658 3.40503 11.224C3.1523 10.9823 3.01031 10.6544 3.01031 10.3125V9.45312Z");
        svg.appendChild(path1);
        let path2 = document.createElementNS(svgns, "path");
        path2.setAttribute("d", "M17.6548 0H2.5611C1.89391 0 1.25405 0.253515 0.782281 0.704774C0.310509 1.15603 0.0454712 1.76807 0.0454712 2.40625V3.52344H20.1705V2.40625C20.1705 1.76807 19.9054 1.15603 19.4337 0.704774C18.9619 0.253515 18.322 0 17.6548 0Z");
        svg.appendChild(path2);
        dunButton.classList.add("myButton");
        options.appendChild(dunButton);
        dunButton.appendChild(svg);
        let span = document.createElement("span");
        span.textContent="карта";
        dunButton.appendChild(span);
    }
    addButton();
    addButton();
//динамически
</script>
 
</html>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.01.2021, 11:56

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

Динамически создать кнопку и поместить на лист
Скажите, пожалуйста, а можно ли в excel с помощью VBA создать кнопку и поместить ее на рабочий лист?

Как динамически создать кнопку на форме
Есть одна кнопка: Button Students = new MyButton(); Students.Location = new...

Создать кнопку динамически и сохранить ее на странице
как сделать это: я создаю динамически кнопку на странице и нужно как-то её сохранить на ней,так...

Как создать динамически кнопку, которая показывает ModalPopupExtender
Создаю динамическую страницу, т.е у мну все в updatePanel. Мне необходимо чтоб я мог создать...

динамически создать форму и на ней расположить график и кнопку
Помогите пожалуйста. Пишу программу которая апроксимирует графики (линейной и квадратичной...

Как создать динамически страницу (вкладку) по нажатии на кнопку на странице сайта????
Есть ASP сайт. Необходимо задать параметры запроса в textbox-ах. Затем нажать на кнопку, должна...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.