如何更改表單中標籤的顏色？

HTML

<label for="fName">First Name<sup>*</sup></label> 
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/>

的JavaScript

var fName = document.getElementById("fName"); 
fName.label.style.color="red";

這是改變顏色或標籤，或是否需要它自己的ID有效的方法是什麼？

感謝您的幫助！澄清，如果表單提交中的字段爲空，則顏色需要更改。

來源

2014-03-28 trinathon

你試過了嗎？ –

你可以簡單地通過使用CSS實現這一點 - http://jsfiddle.net/WEBpe/你真的想特別使用JS嗎？ –

當用戶試圖提交表單來更改字段以提醒他們爲空字段時，會觸發javascript。我試過了這個require，但它在Safari中不起作用。 – trinathon

看看這個非常完整的答案：使用 Javascript change color of text and background to input value

來源

2014-03-28 18:53:00 SpidrJeru

這不是OP要的，他想要一些程序化的東西，例如通過將標籤顏色設置爲當相應的字段無效時爲紅色 –

你說得對！當我回答時，這個問題還沒有編輯。 – SpidrJeru

我編輯了我的答案。 – SpidrJeru

CSS使用JavaScript

<label for="fName" class="lbl">First Name<sup>*</sup></label> 
<input type="text" autocomplete="off" name="fName" id="fName" value='' required/> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js></script> 
<script> 
    $(document).ready(function() { 
     $('.lbl').css('color','red'); 
    }); 
</script>

或簡單的JavaScript

form label{color:red};

document.getElementsByClassName("lbl").style.color="red";

來源

2014-03-28 18:54:41

注意，你的「javascript」不是javascript，而是jquery。你應該注意到，特別是因爲OP沒有提及jquery（另外，爲什麼OP下載一個100kb文件只是爲了操縱單一樣式？） – rgthree

這段代碼只是一個例子，你可以從你的服務器添加你的jQuery。和我已經寫了3個選項，使其與它可以使用CSS以及JavaScript核心... 做，但通常所有的設計師用jQuery進行更多的舒適。 :) –

@Tirthrajsinh Parmar：當元素無效時如何使用CSS選項。 – user1645290

您的代碼適用於更改屬性color。但我不認爲你的代碼會改變你的標籤的顏色。如果該元素的風格獨特，那麼可以使用id代替label，並製作相同類型的腳本以更改標籤的顏色。我認爲如果你在css中定義了class並且使用JavaScript代碼添加這個類名，那會很好。

document.getElementById('id').classList.add('class'); 
document.getElementById('id').classList.remove('class');

如果你可以使用jQuery框架。這將節省大量時間。

來源

2014-03-28 18:54:53 Sanoob

使用班級改變顏色通常是最好的想法。因爲你可以調整CSS而不是JavaScript代碼。我也建議使用jQuery框架。 – DanScan

這一切都取決於你的用例。如果您只是試圖將元素靜態設置爲紅色，則應該定義一個css類（例如`red-label {color：red;}）並將該類應用於標籤。

如果您試圖將顏色動態設置爲紅色（例如，在表單驗證錯誤時），則需要使用某種查詢選擇器來定位標籤。

function makeLabelRedDirectly() { 
    document.getElementById('fNameLabel').style.color = 'red'; 
} 

function makeLabelRedViaClass() { 
    // Note you can use the more robust `element.classList` with modern browsers 
    // document.getElementById('fNameLabel').classList.add('red-label'); 
    document.getElementById('fNameLabel').className += ' red-label' ; 
}

以上示例使用document.getElementById來定位元素。你也可以選擇使用document.querySelector或類似jQuery的庫來定位標籤。

工作例如：http://jsbin.com/calol/1

來源

2014-03-28 19:03:52 fny

的input元素沒有一個label財產或其他方式直接引用它的標籤。您需要將id指定給label元素，或者以其他方式找到訪問它的方法。您可以遍歷頁面上的所有label元素，並使用for屬性與input元素匹配的元素，但對其使用id可能更容易。

來源

2014-03-28 20:36:34

我相信沒有任何簡短而直接的方式可以使用javascript訪問與輸入字段對應的附加標籤。您可以通過CSS訪問附加的標籤（在佈局中進行了一些調整），但是在JavaScript中，您必須設置幾行代碼。要使用此代碼，佈局還要求所有附加的標籤都應放在輸入字段之前（允許兩者之間的空格）。這段代碼只是使用DOM元素的previousSibling屬性和其他一些DOM資源。下面是詳細的：

function getLabelFromInputID(inputID){ 
    var prevSib = document.getElementById(inputID).previousSibling; 
    //remove the spaces if any exists 
    while(prevSib.nodeName=='#text') prevSib=prevSib.previousSibling; 
    if(prevSib.getAttribute('for') != inputID) prevSib = null; 
    return prevSib; 
}

使用getLabelFromInputID函數來從相應的輸入字段的ID訪問附加的標籤。請注意，該標籤應正確地具有for屬性設置（這是標準慣例）。

這裏是Fiddle Demo。在這個演示中，你只需點擊頁面即可看到它在運行。

來源

2014-03-29 19:50:36

如何更改表單中標籤的顏色？

回答

相關問題