[英]Adding class to textarea based on select (jquery to javascript)
我有一個腳本,可以在select
下拉列表中進行select
時更改textarea
的字體。 它是用jQuery編寫的。
var selectedScheme = '';
$('.addon-select').change(function() {
$('.addon-custom-textarea').removeClass(selectedScheme).addClass($(this).val());
selectedScheme = $(this).val();
});
我想使用常規JavaScript重寫它。 到目前為止,這是我所擁有的,但是它不起作用。
if (document.getElementsByClassName('.addon-select').value == 'arial') {
document.getElementsByClassName('.addon-custom-textarea').className += ' arial'
}
我想念什么?
getElementsByClassName
返回一個類似於object的數組。 因此,您將必須使用index
來訪問特定元素。
另外,您還有香草JavaScript缺少的更改事件處理程序。
所以
document.getElementsByClassName('.addon-select')
應該是
document.getElementsByClassName('addon-select')[0]
OR
document.querySelector('.addon-select')
JS
document.querySelector('.addon-select').addEventListener('change', function() {
var textArea = document.querySelector('.addon-custom-textarea');
textArea.className = 'addon-custom-textarea ' + this.value;
});
您錯過了將event handler
附加到select
。 我也將id
添加到select
。 如果要使用類,則必須像
document.getElementsByClassName('addon-select')[0]
因為getElementsByClassName
將返回一個array-like object
,因此您需要從中獲取first item
。
document.getElementById('selectFont').addEventListener("change", function(){ let text = document.querySelector('.addon-custom-textarea'); text.className = 'addon-custom-textarea ' + this.value; }, false);
input, select, textarea { padding: 10px 10px; width: 200px; } /* not important */ .arial { font-family: 'Arial'; } .times { font-family: 'Times New roman'; } .courier-new { font-family: 'Courier New'; } .verdana { font-family: 'Verdana'; }
<select id="selectFont" class="addon-select"> <option selected disabled>Select a font...</option> <option value="arial">Arial</option> <option value="times">Times New roman</option> <option value="courier-new">Courier New</option> <option value="verdana">Verdana</option> </select> <br /> <textarea class="addon-custom-textarea" rows="5">This is some text</textarea>
您應該使用document.getElementsByClassName('class-name')[0]
來定位單個元素。
您可以使用classList
在事件偵聽器中 添加和刪除類-請參閱下面的演示,並updated fiddle here
:
var selectedScheme; document.getElementsByClassName('addon-select')[0].addEventListener('change', function() { if (selectedScheme) document.getElementsByClassName('addon-custom-textarea')[0].classList.remove(selectedScheme); document.getElementsByClassName('addon-custom-textarea')[0].classList.add(this.value); selectedScheme = this.value; });
input, select, textarea { padding: 10px 10px; width: 200px; } /* not important */ .arial { font-family: 'Arial'; } .times { font-family: 'Times New roman'; } .courier-new { font-family: 'Courier New'; } .verdana { font-family: 'Verdana'; }
<select class="addon-select"> <option selected disabled>Select a font...</option> <option value="arial">Arial</option> <option value="times">Times New roman</option> <option value="courier-new">Courier New</option> <option value="verdana">Verdana</option> </select> <br /> <textarea class="addon-custom-textarea" rows="5">This is some text</textarea>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.