js控制div位置_如何用JS讓DIV固定在一個位置

① 如何用js讓DIV固定在一個位置

<body>
	<divid="div1"style="width:100px;height:100px;background:#ccc";></div>
</body>
<script>
	varoDiv=document.getElementById('div1');
	oDiv.style.position='fixed';
	oDiv.style.top='20px';
	oDiv.style.left='20px';
</script>
主要思想就是，在js中修改div的位置。所有的賦值，都可以計算後版再傳值，這樣就權不想CSS中只能寫一個值了。

② 用js控制div跟隨滑鼠移動，滑鼠點擊後，滑鼠離開，div留在當前點擊的位置怎麼做

你要的應該是拖拽效果，可以通過jq插件做

http://www.runoob.com/jqueryui/example-draggable.html

基本原理就是滑鼠按下修改div的left和top（或者right/bottom）。滑鼠離開不變。

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<Style>
#test{
position:absolute;
}
</style>
<script>
$(document).mousedown(function(){
$(this).mousemove(function(e){
$("#test").css({"left":e.pageX+"px","top":e.pageY+"px"});
$(document).mouseup(function(){
$(this).unbind('mousemove');
})
})
})
</script>
</head>
<body>
<divid="test">ssssssssss</div>
</body>
</html>

③ 如何用js設置div里內容的位置

JS語言是不能夠直接修改DIV的位置的，因為位置屬於該控制項的樣式，若想用JS這種腳本語言調整DIV的位置，需要調用DIV的style屬性進行設置，也就是需要調整DIV的CSS樣式表。修改分步驟：
1、獲取到需要修改樣式的鏈冊元素；
2、設置調整。
修改的示例代碼如下：
var div1 = document.getElementById('Search')；
div1.style.marginTop = '225px';

通常position的屬性沒有設置或設了默認值absolute，所以枝談使用的都棚搭宏是靜態屬性，這樣就可以直接通過給位置屬性數值來更改元素位置。在js調用時，含『-』的樣式屬性調用時需要先去掉『-』並將下一個字母大寫，下面列一下css樣式表中常用到的位置屬性：
top right left bottom margin padding
margin-top margin-right margin-left margin-bottom
padding-top padding-right padding-left padding-bottom

④ js 怎麼用一個按鈕控制DIV來回顯示和隱藏

1、打開Hbuilder編輯器，新建一個html空白文檔，輸入基本的結構，然後按下Crtl+S保存一下：

⑤ 如何用JS讓DIV固定在一個位置

<body>
	<divid="div1"style="width:100px;height:100px;background:#ccc";></div>
</body>
<script>
	varoDiv=document.getElementById('div1');
	oDiv.style.position='fixed';
	oDiv.style.top='20px';
	oDiv.style.left='20px';
</script>
主要思想就是，在js中修改div的位置。所有的賦值，都可以計算後再傳值，這樣就不想CSS中只能寫一個值了。

⑥ 用JS怎麼控制添加或刪除DIV

document.createElement()是在對象中創建一個對象，要與appendChild() 或 insertBefore()方法聯合使用。x0dx0a 其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。x0dx0a1、添加DIV x0dx0afunction addDiv(w,h){ x0dx0a //如果原來有「divCell」這個圖層，先刪除這個圖層x0dx0a deleteDiv();x0dx0a //創建一個div x0dx0a var newdiv = document.createElement("divCell"); x0dx0a //添加到頁面 x0dx0a document.body.appendChild(newdiv); x0dx0a //通過樣式指定該div的位置方式,若是想要自己設置div的位置,這句話必須有,把它注釋掉你就可以知道效果拉~試試看 x0dx0a newdiv.style.position="absolute"; x0dx0a //通過樣式指定x坐標(隨機數0~450) x0dx0a newdiv.style.top= Math.round(Math.random()*450); x0dx0a //通過樣式指定y坐標(隨機數0~700) x0dx0a newdiv.style.left= Math.round(Math.random()*700); x0dx0a //通過樣式指定寬度 x0dx0a newdiv.style.width=w; x0dx0a //通過樣式指定高度 x0dx0a newdiv.style.height=h; x0dx0a //通過樣式指定背景顏色,,若是背景圖片例為 newdiv.style.backgroundImage="url(img/3.jpg)" x0dx0a newdiv.style.backgroundColor="#ffffcc"; x0dx0a //添加div的內容 x0dx0a //newdiv.innerHTML=i++; x0dx0a //設置樣式透明x0dx0a newdiv.style.filter = "alpha(opacity=50)";x0dx0a //設置IDx0dx0a newdiv.id = "divCell"; x0dx0a }x0dx0a2、刪除DIV x0dx0a function deleteDiv()x0dx0a {x0dx0a var my = document.getElementById("divCell");x0dx0a if (my != null)x0dx0a my.parentNode.removeChild(my);x0dx0a }

⑦ js 改變div位置

調整了一下你寫的代碼直接放在網頁里即可實專現你想要的屬效果
<div id=qzs style="position:absolute; background-color:#ff0000; left: 109px; top: 133px;"><a href="#" onClick=setInterval("shoppingcat()",1)

>fdsafdasf</a></div>

<script language="javascript">
var s=2;
var minheight=70;
var maxheight=445;
var divObj=document.getElementById('qzs');
divObj.style.position='absolute';
function shoppingcat(){
var aa=parseInt(divObj.style.left);

if(aa<=445)
{
divObj.style.left=aa+s;
}

}
</script>

⑧ js怎麼控制滾動條使div在一定區間顯示

js控制滾動條使div在一定區間顯示方法步驟。
一，新建一個html文件，命名為test.html，用於講解如何使用JS控制DIV內容的滾動條。
二，在test.html文件內，創建兩個div模塊，一個div模板包含另一個div模塊。
三，在test.html文件內，分別設置兩個div模塊的id屬性為test，ntest。
四，在css中，分緩源別通過id來設置兩個div的樣式，定義它們的高度、寬度，外部div將overflow屬性設置為auto，遲哪態即超過寬度隱藏，並出現滾動條。注意，內部div的高度、寬度必須比外部div的寬高大，才會出碼源現滾詞條。
五，在js中，通過id獲得外部div對象，使用scrollTop屬性控制垂直滾動條位置為100px，使用scrollLeft屬性控制水平滾動條位置為150px。
六，在瀏覽器打開test.html文件，查看實現的效果。實現在一定區間內顯示。
請確認，謝謝。

⑨ javaScript改變div的位置

參考如下：

<input type="text">
<div id="divShow" style="display:none;position:absolute;">顯示的內容；</div>

display:none，表示此層隱藏；
position:absolute，表示此層的為絕對位置，方便後期進行絕對定位

添加事件，完成效果；

#divShow
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" onfocus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">顯示的內容；</div>

注意：

offsetLeft和OffsetTop不是獲得元素和頁面的距離，只是獲得元素和父元素的的距離，所以要進行while循環一層層累加距離，最後得到元素和頁面之間的距離
層次關系：本元素->父元素->……>body->null，當為null時，退出while循環。

最終效果如下：

⑩ 怎麼通過js設置div浮動層的相對位置

1、利用js代碼首先創建一個div，document.createElement('div'); 2、確認div添加位置，可以在某個dom元素後面，或者通過css屬性控制具體位置，主要通過left/top等屬性控制。 3、確定位置之後，顯示div即可。示例：比如html中有一個文本輸入框，...

導航:首頁 > 編程語言 > js控制div位置

js控制div位置

與js控制div位置相關的資料

友情鏈接