`

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";
分享到:
评论

相关推荐

    document.createElement(&quot;A&quot;)比较不错的属性

    综上所述,通过使用`document.createElement("A")`方法,开发者可以灵活地创建具有各种属性的`&lt;a&gt;`元素,并通过JavaScript控制其行为和样式。在Web开发中,这种技术对于实现页面的动态交互和功能至关重要。 需要...

    document.createElement()用法及注意事项(ff下不兼容)

    在IE中,你可以直接在`document.createElement()`的参数中包含元素的所有属性,如样式和事件,例如: ```javascript var inputObj = document.createElement(";border-bottom:2px solid #c0c0c0;' readonly&gt;"); ``` ...

    js 用CreateElement动态创建标签示例

    5. 设置`input`的样式,根据传入的`width`和`height`参数动态设置其宽度和高度。 6. 如果`event`参数存在且不为空,则遍历事件数组,将事件添加到`input`元素的`onclick`等事件处理器中。 需要注意的是,上述代码中...

    css+js实现部分区域高亮可编辑遮罩层.docx

    在实现遮罩层时,需要使用javascript来监听事件,例如点击事件、hover事件等,以便在用户交互时触发遮罩层的显示和隐藏。例如,可以使用`addEventListener`方法来监听点击事件,然后在事件处理函数中设置遮罩层的...

    使用jQuery解决IE与FireFox下createElement方法的差异

    2. `document.createElement('&lt;table border="0"&gt;')`: IE允许直接在字符串中添加属性和样式,这种方式创建的元素已经包含了指定的属性(如`border`)。 相比之下,Firefox和其他遵循W3C标准的浏览器(如Chrome, ...

    js添加css样式小技巧

    - `sURL`参数用于指定样式表的URL。 - `iIndex`参数表示样式表的索引位置(可选)。 - 此方法仅适用于IE浏览器,不被W3C标准所支持。 **应用场景:** - 在IE浏览器中动态添加样式表。 #### 四、处理iframe中...

    js实现鼠标滑动到某个div禁止滚动

    此外,还考虑到了不同浏览器(如IE和Firefox)对事件处理的兼容性问题,并给出了相应的解决方案。 具体实现步骤如下: 1. 首先定义了一个div元素,并通过CSS对其进行了样式设置,使其能够成为目标区域。 ```css #...

    通用脚本样式总结使用

    通用脚本样式不仅涉及JavaScript基础,还包括CSS和HTML的交互、DOM操作、事件处理、动画效果等多个方面。以下是对这些知识点的详细总结: 1. **JavaScript基础**: - 变量声明:JavaScript中的变量可以使用`var`, ...

    JS操作DOM元素属性和方法大全

    - `getComputedStyle`: 获取元素的最终计算样式,包括继承和浏览器默认样式。 - `classList`: 操作元素的类名,如添加、移除、切换类。 7. **遍历DOM** - `childNodes`: 获取元素的所有子节点,包括文本节点和...

    jquery打印指定的div

    但是,如果只希望打印指定`div`的内容,我们就需要对这个方法进行封装和调整。 以下是一个简单的jQuery函数示例,用于打印指定ID的`div`: ```javascript function printDiv(divId) { var divToPrint = document....

    文字或图片弹出指定大小的窗口.rar

    2. **CSS样式控制**:为了让窗口具有指定的大小,你需要通过JavaScript动态设置CSS样式。这可以通过元素的`style`属性完成,例如`element.style.width`和`element.style.height`来设定宽度和高度。 3. **事件监听**...

    html_document对象

    - `getComputedStyle(element)`:返回元素的最终计算样式,包括浏览器默认样式和外部样式表的影响。 8. **文档片段(DocumentFragment)** - `createDocumentFragment()`:创建一个不附加到DOM的文档片段,用于...

    用js保存页面指定内容、指定文件类型

    标题 "用js保存页面指定内容、指定文件类型" 涉及的是JavaScript(js)在Web开发中的一个常见应用场景,即动态地从网页中提取特定内容,并将其保存为用户指定的文件格式。在这个例子中,重点是将HTML表格(Table)的...

    第21章 DOM操作表格及样式1

    本章主要探讨DOM操作表格(`&lt;table&gt;`)和样式的相关知识。 ### 1. 操作表格 #### 1.1 创建表格 创建表格主要通过`createElement`方法来实现。例如,要创建一个简单的人员表,首先创建`&lt;table&gt;`元素,然后依次添加`...

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

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

    常用的JS 特效 函数

    `element.style`对象可以直接访问内联样式,`getComputedStyle`用于获取元素的最终计算样式,包括浏览器应用的默认样式和继承样式。 五、数组和对象操作 在JavaScript中,数组的`map`、`filter`、`forEach`、`...

    ui.pdf

    例如,`document.body.style`允许我们直接操作页面主体的样式,而`document.createElement()`和`document.querySelector()`等方法则用于创建新元素和查找特定元素。 DOM树遍历和搜索是基本操作。`getElementById()`...

    实验项目 6 基于 DOM 的 JavaScript 编程应用

    - `getComputedStyle()`方法获取元素的最终计算样式,包括浏览器的默认样式和用户自定义样式。 5. **图片操作** - 图片元素(`&lt;img&gt;`)可以通过JavaScript动态加载和替换,使用`src`属性设置图片URL。 - 通过`...

    JavaScript代码大全

    《JavaScript代码大全》是一本全面的JavaScript编程指南,内容覆盖了JavaScript的核心概念、DOM操作、事件处理、表单处理、CSS样式操控、定时器与cookie管理等多个方面。本书以清晰的字迹和全面的书签,使得阅读体验...

Global site tag (gtag.js) - Google Analytics