DOM—创建html元素(ajax实战学习)

最新推荐文章于 2022-01-25 09:45:22 发布

inmyownsky1

最新推荐文章于 2022-01-25 09:45:22 发布

阅读量1k

点赞数

分类专栏： AJAX技术学习文章标签： html ajax stylesheet javascript function xhtml

本文链接：https://blog.csdn.net/inmyownsky1/article/details/5432550

版权

AJAX技术学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、页面中的一个Default文件，引入了外部的样式表hello.css和外部脚本hello.js

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/hello.css" rel="Stylesheet" />
    <script src="js/hello.js" language="javascript" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <p id="hello">hello</p>
    <div id="empty">

    </div>
    </form>
</body>
</html>

hello.css文件

.declared
{
color:Red;
font-family:Arial;
font-size:16px;
font-weight:normal;
}
.programmed
{
color:Blue;
font-family:helvetica;
font-weight:bold;
font-size:10px;

}

hello.js文件内容

hello.js

window.onload = function() {
var hello = document.getElementById('hello');//通过元素id找到该元素
hello.className = "declared";//运用节点的className属性应用预先定义的，可重用的样式到文档中

    var empty = document.getElementById('empty');
    addNode(empty, "reader of");
    addNode(empty, "ajax in action!");

    var children = empty.childNodes;//每一个节点有不多于一个的父节点，但是可以有任意多个子节点，可以通过parentNode和childNodes来访问它们，parentNode返回另外一个DOM节点，childNodes返回一个javascript节点数组，可以对其进行遍历
    for (var i = 0; i < children.length; i++) {
        children[i].className = 'programmed';
    }

empty.style.border = "solid green 2px";//style属性，DOM节点包含一个名为style的关联数组，其中包含节点样式的全部细节，用来定义元素的样式
empty.style.width = "200px";

    function addNode(el, text) { //创建节点addNode函数使用标准的的document.createElement()和document.createTextNode()方法，document.createElement()用来创建任何的html元素，方法本身来有一个标签类型的参数
        var childEl = document.createElement("div");
        el.appendChild(childEl);//无论任何类型的节点一旦被创建，就应该附加在文本上，采用appendChild()来完成这个工作
        var txtNode = document.createTextNode(text);//创建文本节点
        childEl.appendChild(txtNode);
    }
}

inmyownsky1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
DOM—创建html元素(ajax实战学习)

1、页面中的一个Default文件，引入了外部的样式表hello.css和外部脚本hello.js hello hello.css文件 .declared{ color:Red; font-family:Arial; font-size:16px; font-weight:normal;}.prog
复制链接

扫一扫