js指定diva樣式（定義div樣式）

本文目錄一覽：

• 1、如何利用js向指定位置添加一個div層
• 2、如何利用js向指定位置添加一個div層？
• 3、用JS怎麼寫一個點擊按鈕就可以改變指定div的ID或者class名呢
• 4、怎麼讓js代碼只作用在指定的範圍（比如指定的div）

如何利用js向指定位置添加一個div層

1、利用js代碼首先創建一個div，document.createElement(‘div’);

2、確認div添加位置，可以在某個dom元素後面，或者通過css屬性控制具體位置，主要通過left/top等屬性控制。

3、確定位置之後，顯示div即可。

示例：比如html中有一個文本輸入框，我們現在需要在挨著輸入框右下角位置顯示一個div。

input type=”text” id=”city” value=”beijing”/

方法：

function createDiv(){

    //首先創建div

    var descDiv = document.createElement(‘div’);

    document.body.appendChild(descDiv);

    //獲取輸入框dom元素

    var text = document.getElementById(‘city’);

    //計算div的確切位置

    var seatX = text.offsetLeft + text.offsetWidth;//橫坐標

    var seatY = text.offsetTop + text.offsetHeight;//縱坐標

    //給div設置樣式，比如大小、位置

    var cssStr = “z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1px solid black;position:absolute;left:” 

    + seatX + ‘px;top:’ + seatY + ‘px;’;

    //將樣式添加到div上，顯示div

    descDiv.style.cssText = cssStr;

    descDiv.innerHTML = ‘這是一個測試的div顯示的內容’;

    descDiv.id = ‘descDiv’;

    descDiv.style.display = ‘block’;

}

如何利用js向指定位置添加一個div層？

把外鏈接的JS載入到body後面，在這個JS裡面用類似這樣的代碼：

var div = document.createElement(‘div’); // 新增元素

var diva = document.getElementById(‘a’); // 獲取id為a的元素

diva.parentNode.insertBefore(div, diva); // 在這個元素前面增加上去

用JS怎麼寫一個點擊按鈕就可以改變指定div的ID或者class名呢

!DOCTYPE html

html

head

style

.c1{

  background:red;

}

.c2{

  background:blue;

}

/style

/head

body

script

function changeclass(){

  var divEle= document.getElementById(‘diva’);

  divEle.className=’c2′;//改變樣式

  divEle.id=’cccc’;//改變id

  var divEle2= document.getElementById(‘cccc’);

  alert(“停頓”);

  divEle.className=’c1′;

}

/script

div id=’diva’ class=’c1’111/div

input type=’button’ onclick=’changeclass()’ value=’改變樣式’/

/body

/html

怎麼讓js代碼只作用在指定的範圍（比如指定的div）

在js或者jQuery下面得到指定的div下面的指定a標籤的方法：1、通過id直接獲取所需a標籤：$(“#ids”);2、通過從屬關係獲得a標籤。$(“diva”);然後對取得的元素遍歷，找到需要的a標籤即可。