`
maomaozgc
  • 浏览: 329309 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript创建div的属性和样式

阅读更多
问题域:
如何由JavaScript创建div节点元素:
                 创建div节点元素的属性;
                 创建div节点元素的样式;

解决方案:
1.创建div元素:

<script type="text/javascript">
      function createElement(){
	var createDiv = document.createElement("div");
	createDiv.innerHTML = "Test create a div element!";
	document.body.appendChild(createDiv);
       }
</script>




2.创建div的属性:


<script type="text/javascript">
    function createElement(){
	var createDiv = document.createElement("div");
	createDiv.title="this is a new div.";
         createDiv.id="newDivId";
	createDiv.class = "newDivClass";	
	createDiv.innerHTML = "Test create a div element!";
	document.body.appendChild(createDiv);
     }
</script>




3.创建div的样式:


<script type="text/javascript">

     function createElement(){
	var createDiv = document.createElement("div");
	createDiv.style.background = "pink";
         createDiv.style.border="1px solid red";
	createDiv.style.width = "50px";
	createDiv.style.height = "50px";
	createDiv.innerHTML = "Test create a div element!";
	document.body.appendChild(createDiv);
      } 
</script>


分享到:
评论

相关推荐

    JavaScript动态创建div属性和样式示例代码

    动态创建div属性和样式在某些情况下还是比较实用的,下面为大家详细介绍下js中div属性和样式的动态创建,感兴趣的朋友可以参考下

    JavaScript详解(第2版)

     16.2 使用JavaScript创建cookie   16.2.1 cookie对象   16.2.2 设置cookie属性   16.2.3 创建cookie   16.2.4 从服务器获取cookie信息   16.2.5 删除cookie   16.2.6 使用浏览器删除cookie  ...

    JavaScript基础教程第8版

    1.10.2 div和span 10 1.10.3 class和id 11 1.11 要使用什么工具 12 第2章 开始 13 2.1 将脚本放在哪里 13 2.2 关于函数 14 2.3 使用外部脚本 15 2.4 在脚本中添加注释 17 2.5 向用户发出警告 18 ...

    使用 JavaScript 将 JSON 转换为对象,并使用 DOM API 将其呈现在 HTML 页面.html

    具体来说,我们创建一个 &lt;div&gt; 元素,用于显示转换后的结果,然后遍历对象的所有属性,为每个属性创建一个 &lt;p&gt; 元素,用于显示属性名和属性值,并将其添加到 &lt;div&gt; 元素中。如果 JSON 输入无效,我们将显示一个警告...

    程序天下:JavaScript实例自学手册

    14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...

    JavaScript完全自学宝典 源代码

    示例描述:介绍JavaScript管理cookie和userData。 11.1.html JavaScript写数据到cookie。 11.2.html JavaScript获取cookie信息。 11.3.html JavaScript修改cookie的保存有效期。 11.4.html 保存数据...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...

    HTML5+CSS3+JavaScript网页设计8.zip

    第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java Script语言基础 第14章 Java Script内置对象 第15章 Java Script对象编程 第16章 Java ...

    JavaScript网页特效范例宝典源码

    实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...

    html实现图片轮播(含代码和注释)

    这个示例展示了如何使用HTML、CSS和JavaScript创建一个基本的轮播图。 首先,在HTML部分,我们创建了一个具有.slideshow类的div元素作为轮播图的容器。我们在容器中放置了多个img元素作为轮播图的图片。每个img元素...

    JavaScript 图片切割效果

    其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。 底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角: this._layBase.style.top = this._layBase.style....

    精通javascript

    • 6.1.htm 对象创建与属性调用 • 6.4.htm this关键字的使用 • 6.5.htm 数组的length属性 • 6.6.htm 数组元素遍历 • 6.7.htm 数组元素遍历 • 6.8.htm 数组...

    精通JavaScript

    • 6.1.htm 对象创建与属性调用 • 6.4.htm this关键字的使用 • 6.5.htm 数组的length属性 • 6.6.htm 数组元素遍历 • 6.7.htm 数组元素遍历 • 6.8.htm 数组...

    百度地图API教程

    // 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回 // 在本方法中创建个div元素...

    下雪了 javascript实现雪花飞舞

    1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。 2、js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3、好像不够完善勿喷 效果预览:...

    Web程序设计计算机科学经典教材.doc

    13 1.7.2 响应阶段 14 1.8 安全性 15 1.9 Web编程工具箱 17 1.9.1 XHTML概述 17 1.9.2 创建XHTML文档的工具 18 1.9.3 插件和过滤器 19 1.9.4 XML概述 19 1.9.5 JavaScript概述 20 1.9.6 Flash概述 20 1.9.7 PHP概述 ...

    新能源汽车数量统计大屏.zip

    主要包含一个用于显示数量的元素,如 `&lt;div&gt;`,并使用 CSS 对其进行美化和布局。 使用 JavaScript 来获取新能源汽车数量的数据。可以通过调用 API 或从数据库中提取数据,或者根据预设的固定数据进行模拟。可以使用...

Global site tag (gtag.js) - Google Analytics