id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的规则。
称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在DIV中的HTML。应用于StyleSheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有Class;Style;title;ID等属性，将会于StyleSheet一节才作详述，这处只介绍一个属性设定。以
为例：align="center"
可选值：center;left;right。决定字、画、表格等居中、靠左或靠右。
的作用和居中标记一样，前者是由HTML30开始的标准，后者是通用己久的标示法。CSS单元的位置和层次-div标签
我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和 *** 作平台的不同会使显示的结果发生变化。
而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有还有你自己慢慢看吧！
CascadingStyleSheets（CSS）是DHTML的基础。CSS用来设定你网页上的元素是如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS和CSS－P。下面四个英文网址提供了详细的关于CSS和CSS-P的文件和解释。
1．使用DIV标签（div）
当我们使用CSS-P的时候，我们主要把它用在DIV（division）tag上。当你把文字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在DIV中的HTML。
使用DIV的方法跟使用其他tag的方法一样：
ThisisaDIVtag如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用
是一样的。但当我们把CSS-P用到DIV中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被CSS-P控制的DIV一个ID或说是它的名字。比如说我们给下面这个DIV的名字是truck。给名字的目的是我们以后可用JavaScript来控制它，比如说移动它或改变它的一些性质等等。
<style>
#box{ width:300px; height:150px; border:#009999 1px solid; margin-top:10px; }
#text_area{ width:300px; height:50px; }
</style>
<script>
function sShow(){
documentgetElementById("box")innerHTML=documentgetElementById("text_area")value;
}
</script>
<textarea id="text_area" onKeyUp="sShow()" onClick="sClear">请在这里输入文本</textarea>
<div id="box"></div>
恩 我试过了 ie和火狐都兼容的哦~
复制粘贴看看吧 祝楼主好运！
原生JS有3种方式来获取元素:
getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办
明显通过className==是不行了
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }
这样就能处理一个元素含有多个classname的情况了
在指定的div内使用getElementsByTagName获取元素的主要代码为：
getElementById(div_id)getElementsByTagName(tag_name);示例如下：
1、HTML结构
<div id="test">id=test: <span>Glen</span><span>Tane</span><span>John</span><span>Ralph</span>
</div>
<div id="test1">
id=test0: <span>Glen1</span><span>Tane1</span><span>John1</span><span>Ralph1</span>
</div>
<input type='button' value='获取id为test的div下的span' onClick="fun()"/>
2、javascript代码
function fun(){obj = documentgetElementById("test")getElementsByTagName("span");
str= [];
for(i=0;i<objlength;i++){
strpush(obj[i]innerHTML);
}
alert(str);
}
3、效果演示
<div class='div1'>div1内容</div>
<div class='div2'>div2内容</div>
<script type="text/javascript">
const div1 = documentgetElementByClassName('div1')[0]innerText
documentgetElementByClassName('div2')[0]innerText = div1
</script>
可以尝试一下
通过documentgetElementById("div的ID名字")innerHTM=“你要设置的值”来实现。
代码示例如下：
=================================
<html>
<head>
<meta charset="UTF-8">
<script>
function ChangeDiv()
{
documentgetElementById("1")innerHTML="内容2";
}
</script>
</head>
<br> <br> <br>
<div id = "1" >内容1</div>
<input type="button" onclick="ChangeDiv()" value="设置DIV内容" />
</body>
</html>
==========================
原页面内容如下：
点击“设置DIV内容”按钮后，系统执行Javascript代码后结果如下：
扩展资料：
DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
参考资料：
1、新建一个html文件，命名为testhtml，用于讲解Jquery如何获得div下的元素。
2、在testhtml文件内，使用div标签创建一个模块，在div内，使用p标签，span标签创建测试的内容。
3、在testhtml文件内，设置div的id属性为divcon，主要用于下面通过该id获得div对象。
4、在testhtml文件内，使用button标签创建一个按钮，按钮名称为“获得div下的元素”。
5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行divfun（）函数。
6、在js标签中，创建divfun()函数，在函数内，通过id(divcon)获得div对象，使用html()方法便可以获得div对象下面的元素了。最后，使用alert()方法输出元素。
7、在浏览器打开testhtml文件，点击按钮，查看结果。
总结
1、创建一个testhtml文件。
2、在文件内，在div标签内，使用p标签创建一行文字，同时创建一个button按钮，用于触发执行js函数。
3、在js标签内，创建函数，在函数内，使用getElementById()方法通过id（mydiv）获是div对象，再使用getElementsByTagName()方法获得div下面的p元素对象，最后，使用alert()方法输出p元素的内容。
以上就是关于div标签的问题div标签用法全部的内容，包括:div标签的问题div标签用法、如何让一个DIV获取到textarea里面的内容、getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）