其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
1、添加DIV
function addDiv(w,h){
//如果原来有“divCell”这个图层，先删除这个图层
deleteDiv();
//创建一个div
var newdiv = documentcreateElement("divCell");
//添加到页面
documentbodyappendChild(newdiv);
//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看
newdivstyleposition="absolute";
//通过样式指定x坐标(随机数0~450)
newdivstyletop= Mathround(Mathrandom()450);
//通过样式指定y坐标(随机数0~700)
newdivstyleleft= Mathround(Mathrandom()700);
//通过样式指定宽度
newdivstylewidth=w;
//通过样式指定高度
newdivstyleheight=h;
//通过样式指定背景颜色,,若是背景 例为 newdivstylebackgroundImage="url(img/3jpg)"
newdivstylebackgroundColor="#ffffcc";
//添加div的内容
//newdivinnerHTML=i++;
//设置样式透明
newdivstylefilter = "alpha(opacity=50)";
//设置ID
newdivid = "divCell";
}
2、删除DIV
function deleteDiv()
{
var my = documentgetElementById("divCell");
if (my != null)
myparentNoderemoveChild(my);
}
select属于浏览器内置组件，标准CSS无法调整其样式。
你可以使用div来模拟select。
首先创建一个<div />来模拟下拉框。
<div class="mySelect"></div>然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />
<div class="mySelectValue"></div>
<div class="mySelectDropdown"></div>
<ul class="mySelectOptions"></ul>
</div>
你可以用CSS来设置自己喜欢的样式。
接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）
// 创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）var $mySelect = $('<div class="mySelect"></div>');
// 把原来select有的样式复制到模拟的下拉框上
$mySelectattr('class', $('#select')attr('class'));
$mySelectattr('style', $('#select')attr('style'));
// 把原来select的选项复制到模拟的下拉框中
$('#select option')each(function () {
var value = $(this)attr('value'),
name = $(this)html();
$mySelectfind('mySelectOptions')append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>');
});
// 在模拟下拉框中设置选中的值
$mySelectfind('mySelectValue')html($('#select option:selected')html());
// 隐藏原有的select
$('#select')hide();
// 给模拟的下拉框绑定事件
$mySelect
on('click', function (e) {
// 阻止点击事件向上冒泡
estopImmediatePropagation();
// 反转下拉列表的显示
$('mySelectOptions', this)toggle();
// 给原有的select模拟点击事件
$('#select')trigger('click');
})
on('click', 'mySelectOption', function (e) {
// 阻止点击事件向上冒泡
estopImmediatePropagation();
// 把选中的值显示到模拟的下拉框中
$mySelectfind('mySelectValue')html($(this)html());
// 隐藏下拉列表
$mySelectfind('mySelectOptions')hide();
// 把选中的值给到原来的select中
$('#select')val($(this)data('id'));
// 给原来的select模拟change事件
$('#select')trigger('change');
});
// 基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。你的代码写的不规范，属性的值需要加引号
objstyleborder=0px 这个地方 opx是字符串 也需要引号的 objstyleborder=0或objstyleborder=‘0px’ 都可以 下面是一个正常的例子 有用的话 选我为满意答案 谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border</title>
<style type="text/css">
divone{border:1px solid #000000; background:#fff;}
</style>
<script type="text/javascript">
function removes()
{
divs = documentgetElementsByTagName("div");
alert(""+divslength+"");
for (i = 0; i < divslength ; i++)
{
remove(divs[i]);
}
}
function remove(obj)
{
objstyleborder = '0px';
}
</script>
</head>
<body>
<div class="one" id="dragdiv1">
<textarea id="1">1</textarea>
</div>
<div class="one" id="dragdiv2">
<textarea id="2">2</textarea>
</div>
<div class="one" id="dragdiv3">
<textarea id="3">3</textarea>
</div>
<button onclick="removes()">去div边框</button>
</body>
</html>
用JS给div添加样式是通过js *** 作css来实现的。
用js方法找到div的dom对象
通过js *** 作css的style属性来改变div的样式
具体举例如下：
定义div:<div id="myDiv" style="color:red">改变样式测试</div>
编写js代码：
var color = documentgetElementById("myDiv")stylecolor;
if (color == "red")
documentgetElementById("myDiv")stylecolor="black";
else
documentgetElementById("myDiv")stylecolor="red";
执行js代码后，div原来是红色会变成黑色，原来是别的颜色会变成红色
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）