如何控制HTML中DIV的加载顺序

html-css09

如何控制HTML中DIV的加载顺序,第1张

加载顺序一般是从上到下的顺序加载，各个浏览器的实现其实也不完全相同，有的是进行并行加载，分配的进程数量也不同。

如果是要控制显示顺序的话，可以在html里先将所有的div设置成隐藏，然后在js里给document的加载完成事件写入自己想要的显示顺序，既使用延时来去掉div的隐藏属性。

加载顺序这个改变不了，因为各个浏览器的实现加载的方法是不同的，而且是非常复杂的。自己只能控制自己写的代码，仔细检查，不让它出错。

有3种方式可以将css定义的样式加到HTML里。

1.外联

在HTML里加一个超连结连到外在的CSS文档，这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开，只需要在一个CSS文档内定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。

它的写法是： <HTML>

<HEAD>

<TITLE></TITLE>

<LINK REL="stylesheet" HREF="http://www.xyz.com/xyz.css" TYPE="text/css">

</HEAD>

2. 嵌入

在 HTML的<HEAD></HEAD>标签间，加一段CSS定义

这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身HTML内定义的CSS样式。

如果内在定义的CSS定义与外在连结的CSS定义相冲突的话，网页的样式将以内在定义的CSS定义为主。

它的写法是： <HTML>

<HEAD>

<TITLE></TITLE>

<STYLE TYPE="text/css">

div{

font: 12pt

font: 16pt

font-weight: bold

color: green

}

</STYLE>

</HEAD>

<BODY>

<div>内容</div>

</BODY>

</HTML>

3.内联

在HTML的字里行间中加入CSS定义。

这个方法适用于指定网页内的某一小段的样式。

如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。

它的写法是： <HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<P STYLE="color: red">内容 </P>

</BODY>

</HTML>

上面的3种CSS引入方式可以同时并用，也可以单一或成双地使用。如果各CSS间的定义相冲突，则嵌入定义的CSS会盖过外联连结的CSS，内联的CSS会盖过嵌入定义的CSS。

解答：

1，基于Jquery的DIV嵌套html

html代码：

<script src="js/jquery.js"></script> <div id="btn" > 新页面</div>

<div id="newDiv"></div>

js代码：

$(document).ready(function)(){

    $("#btn").click(function(){

    $('#newDiv').load('new.html')

  })

})

点击“新页面”即可实现添加

2，基于纯js代码实现嵌套：

html代码：

<button type="button" id="btn" onClick="javascript:load_home()" >

 确认</button>1

js代码：

function load_home() {

 document.getElementById("viewDiv").innerHTML = '<object 

type="text/html" data="new.html" width="100%" height="100%">

</object>'

   }