Как изменить текст в кнопке css
Перейти к содержимому

Как изменить текст в кнопке css

  • автор:

как изменить текст кнопки js

Для изменения текста кнопки в JavaScript необходимо получить доступ к элементу кнопки с помощью метода document.getElementById() , затем установить текстовое значение. Например, через свойство textContent :

 id="myButton">Нажми меня 
const button = document.getElementById('myButton'); button.textContent = 'Новый текст кнопки'; 

В этом примере мы получили элемент кнопки по его id , затем установили новое значение свойства textContent на «Новый текст кнопки». Кнопка теперь будет отображать этот текст.

13 апреля 2023

Чтобы изменить текст на кнопке с помощью JavaScript, можно использовать свойство innerHTML элемента кнопки. Вот пример:

Нажми меня  

В этом примере, сначала находим кнопку с помощью метода getElementById() , а затем используем свойство innerHTML для изменения текста кнопки на «Кликни меня». Это заменит текст «Нажми меня» на кнопке на новый текст «Кликни меня».

Также можно использовать метод innerText вместо innerHTML , если нужно изменить только текстовое содержимое элемента кнопки без изменения любых HTML-тегов внутри этого элемента. Вот пример:

Нажми меня  

Оба примера изменят текст на кнопке на новый текст. Выбор между использованием innerHTML или innerText зависит от того, нужно ли изменять только текстовое содержимое элемента или изменять HTML-теги внутри элемента кнопки.

Как изменить текст кнопки «Подтвердить заказ»

Кстати, на сайте вы также можете найти мой видеокурс по WooCommerce, в котором мы создаём интернет-магазин на основе готового HTML и CSS.

Вот что получилось у меня и я покажу вам, как достичь этого тоже:

Мало того, что есть несколько способов переименовывания этой кнопки, так вы ещё можете задать произвольный текст в зависимости от выбранного метода оплаты.

1. woocommerce_order_button_text

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

add_filter( 'woocommerce_order_button_text', 'truemisha_order_button_text' ); function truemisha_order_button_text( $button_text ) { return 'Заказать'; }

Код можете вставить в functions.php вашей текущей или дочерней темы…

2. woocommerce_order_button_html

Хук woocommerce_order_button_html явно нужен для чего-то большего, чем всего лишь для смены текста кнопки. Хм, возможно вы захотите поменять её атрибут ID или докинуть классов.

Ну а текст тут можно поменять при помощи PHP-функции str_replace() ну или полностью воссоздать HTML кнопки с нуля.

add_filter( 'woocommerce_order_button_html', 'truemisha_order_button_html' ); function truemisha_order_button_html( $button_html ) { return str_replace( 'Подтвердить заказ', 'Заказать', $button_html ); }

3. Текст кнопки для определённых методов оплаты

Большинство методов оплаты не изменяют текста кнопки, потому что они не прописывают этот свой параметр при регистрации:

class TruemishaGateway extends WC_Payment_Gateway { public function __construct() { $this->id = 'truemisha_gateway'; $this->order_button_text = 'Тут текст кнопки'; .

И потом у радиокнопок методов оплаты появляется атрибут data-order_button_text , который и содержит текст кнопки, на который нужно поменять при смене платёжного шлюза. Можете попробовать там сделать что-то с JavaScript, но имейте ввиду, что выбор платёжных шлюзов подгружается не сразу при первой загрузке страницы, а асинхронно!

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

add_filter( 'gettext', 'truemisha_paypal_btn_text', 20, 3 ); function truemisha_paypal_btn_text( $translated_text, $text, $domain ) { if( 'Дальше на PayPal' == $translated_text && 'woocommerce' == $domain ) { // старый текст $translated_text = 'Оплата Палкой'; // новый текст } return $translated_text; }

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Возможно ли посредством CSS заменить текст в кнопке после нажатия?

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

Доброго дня форумчане. Подскажите пожалуйста, возможно ли после нажатия на кнопку, изменить текст кнопки?
Есть блок, который раскрывает и сворачивается по клику. Но хотелось немного доделать, чтобы изначально была кнопка «Подробнее», а если нажать на неё, то раскроется блок и в кнопке поменяется текст «Свернуть». Или все-таки без JS не обойтись?

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
.group_description_block.top { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .group_description_block.top .xpandable-block { height: 60px; overflow: hidden; order: 0; } .group_description_block.top .xpand-button { order: 1; } .group_description_block.top input[type="checkbox"] { display: none; } .group_description_block.top input[type="checkbox"]:checked + .xpandable-block { height: auto; } .group_description_block.top label { order: 1; cursor: pointer; margin-top:10px; } .group_description_block.top label:after { content:"Подробнее"; }

Как увеличить текст внутри кнопки-картинки (CSS)?

Учусь делать сайт по шаблону, и надо сделать кнопку (может не кнопку пока не разобрался, но сделал кнопку). Внутри вообщем изображение, а внутри изображения текст. И мне надо чтоб при наведении изображение размывалось и немного увеличивалось (с этим я справился), но возникла другая проблема! Надо чтоб текст тоже при наведении увеличивался, но когда я навожу мышь на картинку анимация картинки происходит, а вот анимация текста нет. И если я я наведусь на текст то текст увеличивается а эффект изображения исчезает. Ну и текст как-то некрасиво увеличивается (скорее всего это из-за margin-top, но vertical-align не работает, и top тоже не работает!), надо чтоб он как бы приподнялся.(Это я сам как нибудь решу, но буду благодарен если скажете почему не работает vertical-align и top)
Вообщем надо синхронизировать анимацию изображения с анимацией текста!

Вообщем вот код

 
.img_btn_1, .img_btn_2 < position: relative; display: inline-block; border: none; padding: 0; overflow: hidden; >.img_btn_1 < margin-left: 3.65%; float: left; >.img_btn_2 < float: right; margin-right: 3.65%; >.img_btn_1 img.img_g, .img_btn_2 img.img_g < height: 409px; width: 543px; transition: all 1s ease; >.img_btn_1 img.img_g:hover, .img_btn_2 img.img_g:hover < filter: blur(1px); transition: all 0.5s ease; transform: scale(1.2) >.img_btn_1 span, .img_btn_2 span < position: absolute; top: 10px; width: 100%; left: 0; >.img_btn_1 span h5, .img_btn_2 span h5 < color: #FFFFFF; font-size: 14px; font-weight: normal !important; margin-top: 30%; margin-bottom: 5px !important; text-align: center; font-family: pfdintextcondpro-regular !important; >.img_btn_1 span p, .img_btn_2 span p < color: #FFFFFF; font-size: 32px !important; font-family: pfdintextcondpro-regular !important; font-weight: bold !important; margin: 0; line-height: 30px; >.icon

Стили текста я убрал, но там я увеличивал текст с помощью font-size, есть ли другой способ чтоб можно было увеличить в процентах, т.к. два разных размера шрифта, и не хочется каждому прописывать размер

Скрины
5fdfa434150b8468741419.png(Без наведения)
5fdfa459ad1a2570060315.png(Навдение на изображение)
5fdfa46514d9b554943940.png(тут текст увеличивается когда навожусь конкретно на него)

P.S. top заработал, надо было применить её к span

  • Вопрос задан более трёх лет назад
  • 1065 просмотров

4 комментария

Простой 4 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *