`

createElement 指定样式和事件

    博客分类:
  • WEB
阅读更多
var message = document.createTextNode("info");
var p = document.createElement("p");
p.setAttribute("style", "color:red;");
p.appendChild(message);
 
document.body.appendChild(p);

以上代码创建一个 p,并设置颜色为红色,但是上述代码在 FF 中有效,在 IE 中却无效,要兼容两个浏览器,可以采用如下代码。

方法一、

var message = document.createTextNode("info");
var p;
try
{
    p = document.createElement("<p style=\"color:red\">");
}
catch(e)
{
    p = document.createElement("p");
    p.setAttribute("style", "color:red;");
}
p.appendChild(message); 
 
document.body.appendChild(p);

方法二、

var message = document.createTextNode("info");
var p = document.createElement("p");
p.appendChild(message); 
p.style.color = "red";
 
document.body.appendChild(p);

方法三、

var message = document.createTextNode("info");
var p = document.createElement("p");
p.appendChild(message); 
var np = document.body.appendChild(p);
 
np.style.color = "red";

方法四、

var message = document.createTextNode("info");
var p = document.createElement("p");
p.appendChild(message); 
p.id = "pid";
 
document.body.appendChild(p);
document.getElementById("pid").style.color = "red";
分享到:
评论

相关推荐

    贪吃蛇游戏 场景 使用了js 和 html /css 就可以完成 一个贪吃蛇小游戏

    首先需要一个背景板 需要吧蛇和食物 在指定内容里 不能超出 接下来就是蛇的移动 使用定时间一秒移动一格 食物就是根据计算随机生成 当蛇和食物的位置重叠了就可以认为蛇吃到了食物 当蛇的x,y 大于元素的宽度/高度,...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    createElement 为指定标签创建一个元素的实例。 createEventObject 生成当使用 fireEvent 方法时用于传递事件相关信息的 event 对象。 createStyleSheet 为文档创建样式表。 createTextNode 从指定值中创建文本...

    JavaScript中setAttribute用法介绍

    setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。1、样式问题setAttribute(“class”, value)中class是指改变”class”这个属性,所以要带引号。...

    jQuery详细教程

    hide() 和 show() 都可以设置两个可选参数:speed 和 callback。 语法: $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", ...

    JS添加删除DIV的简单实例

    JS添加删除DIV的简单... //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.style.position="absolute"; //通过样式指定x坐标(随机数0~450) my.sty

    canvas-text-block

    有一些软件包可以通过某种方式执行此操作,但是此实现增加了指定lineHeight和其他样式配置的功能。 用法 安装 安装软件包: npm install canvas-text-block 用法 import CanvasTextBlock from 'canvas-text-block'...

    grunt-ngie:自动为您的Angular自定义指令添加DOM元素

    恩吉 自动为您的Angular自定义指令添加DOM元素除非您为每个对象专门调用document.createElement(),否则在Angular中使用自定义元素样式指令会破坏IE8和更早的版本。 有关更多信息,请参见有关此主题的。 在编写...

    jquery插件使用方法大全

    (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ url: "some.php", async: false }).responseText;...

    Bookmarklet-Boilerplate:使书签开发工作流程变得简单的样板

    一次调用即可加载多个外部脚本或样式表。 使用/配置 以下步骤显示了如何开始使用样板: 1- 将其重命名为您喜欢的任何名称。 2- 根据您的喜好重命名MyApp或保持原样。 3- 指定baseUrl 4- 转到main()函数。 这是...

    JavaScript Table行定位效果

    table的border属性用来指定边框宽度,table特有的frame属性是用来设置或获取表格周围的边框显示的方式。 w3c的tabel的frame部分说明frame可以是以下值: void: No sides. This is the default value. above: The ...

    js使用小技巧

    创建元素 document.createElement("SPAN"); 根据鼠标获得元素: document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document...

Global site tag (gtag.js) - Google Analytics