在HTML中使用鏈接的CSS更改背景和前景

我從字面上看處處都是。目標是使用樣式表中的類設置顏色和背景例如，類選擇器colorA將文本顏色設置爲顏色'A' 通過更改id爲前景的div類來更改文本的顏色通過更改id背景的div類來更改背景顏色。在HTML中使用鏈接的CSS更改背景和前景

我能夠通過手動輸入顏色來改變它，但是當我嘗試通過獲取className來改變它時，它失敗了。這裏是我的代碼伊夫嘗試了幾種不同的東西，沒有運氣，請大家幫忙：

的JavaScript：

function changeBG(col) { 
    var x = document.getElementsByTagName("DIV")[0]; 
    x.backgroundColor = (col); 
}

HTML：

<body> 

<div class="holder"> 
<div id="background" class="backgroundC"> 
    <div id="foreground" class="colorE"> 
     <p> 
      Lorem ipsum </p> 

</div> 
</div> 
</div> 

<div class="holder"> 
<table> 
Foreground <INPUT type="button" value="A" class = "colorA" name="button3"  onClick= "document.fgColor= 'colorA'"> 
    <INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'"> 

    Background <INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'"> 
    <INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))> 
</table> 
</div>

CSS樣式表：

.colorA { 
    color: #4581cf; 
} 

.colorB { 
    color: #B7E2FF; 
} 

.backgroundA { 
    background-color: #4581cf; 
} 

.backgroundB { 
    background-color: #B7E2FF; 
}

來源

2016-02-04 Bk Razor

使用.className更改類 – prashant

changeBG的第一個參數是錯誤的。

在W3C getElementsByClassName方法方法定義
的getElementsByClassName方法（）方法返回與指定類名的文檔中的所有元素的集合，如在HTML代碼中的節點列表對象

，點擊事件結合
onClick= changeBG(document.getElementsByClassName("backgroundB"))

在JS

，單擊事件處理程序
x.backgroundColor=col;

col對象是具有包含'backgroundB'的類屬性的元素的集合。 backgroundColor是一個元素屬性，用顏色值設置。例如）＃f3f3f3

你可以像這樣修復它。

x.className = "background" + col[0].value; //col[0] is the input element classfied 'backgroudB'. col[0].value equals 'B'

className屬性設置或返回元素的類名稱。

來源

2016-02-04 05:02:14 Leesan

我無法感謝你，你是最好的，我一直在這一週衝擊着這一切，終於得到了它！ –

試試這個

確保您傳遞正確的類南

function changeBG(col) { 
     var x = document.getElementsByTagName("DIV")[0]; 
     x.className=col; 
    }

來源

2016-02-04 02:04:39 prashant

對不起，我不理解？「col」是我從文檔中獲得的類名。getElementsByClassName（「backgroundB」） –

您試圖將通過函數傳遞的類名稱指定給「backgroundColor」 – prashant

請使用className屬性設置元素的類名稱。如果你想使用backgroundColor你需要通過顏色代碼而不是類名稱 – prashant

使用jQuery。創建一個新表單，然後複製此代碼並粘貼它，您會注意到特定類顏色中的特定div如何輕鬆更改。

<html> 
<head> 
    <title>The Selecter Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
    $(".big, #div3").css("background-color", "yellow"); 
    }); 
</script> 
</head> 


<body> 
    <div class="big" id="div1"> 
     <p>This is first division of the DOM.</p> 
    </div> 
    <div class="medium" id="div2"> 
     <p>This is second division of the DOM.</p> 
    </div> 
    <div class="small" id="div3"> 
     <p>This is third division of the DOM</p> 
    </div> 
</body> 
</html>

來源

2016-02-04 02:21:38

我是新來的HTML和JavaScript我們還沒有jquery呢。這看起來像它會工作我只是不知道如何將它翻譯成html –

創建一個新頁面，然後複製我的答案並將其粘貼到創建的頁面中，然後您將弄清楚如何更改任何類中的任何元素的背景顏色 –

在HTML中使用鏈接的CSS更改背景和前景

回答

相關問題