精华内容
下载资源
问答
  • 我们都知道网页的组成,其实就是好多标签有序有目的的组成的,那么我们如何动态的添加元素并且设置他的属性,我们可以用js来实现。  在这之前需要了解几个概念(w3c的定义):  节点:  在HTML DOM(文档对象...

            我们都知道网页的组成,其实就是好多标签有序有目的的组成的,那么我们如何动态的添加元素并且设置他的属性,我们可以用js来实现。

           在这之前需要了解几个概念(w3c的定义):

           节点:

            在HTML DOM(文档对象模型)中,每个部分都是节点:

                    文档本身是文档节点

                    所有HTML元素是元素节点

                    所有HTML属性是属性节点

                    HTML元素内的文本是文本节点

                    注释是注释节点

           Element对象;

                    在HTML中,Element对象表示HTML元素。

                    Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点

                    NodeList对象表示节点列表,比如HTML元素的节点集合

                    元素可以拥有属性,属性是属性节点

    好了,现在开始创建元素了

    这是一段html代码的body部分:

    <div id="div1">
    </div> 

     

          如果要添加一个元素,必须先创建该元素也就是先创建一个节点,然后向某个已存在的元素添加

                    创建新的元素

    var  p = document.creatElement("p") 

                     将p元素添加到div中

    //我们首先取到div元素
    var element = document.getElementById("div1")
    //添加
    div.appendChild(p)

                   如果想要添加一些内容到p元素里,我们同样要创建

          

    var node=document.createTextNode("这是要添加的内容。")

                 添加

    p.appendChild(node);

     下面就是创建好的代码:

    <div id="div1">
    <p >这是要添加的内容</p>
    </div>

     这个时候你会有疑问了,如果要添加一个是挺方便的,如果特别多了,那我们岂不是会疯掉的,嘿嘿,下面来看一个属性 innerHtml

    我们只需要获取元素和上面一个步骤

    var element = document.getElementById("div1")
    

     

    然后

    element.innerHTML="<p>"+"这是要添加的内容"+"<p>"

     

    嘿嘿,是不是要更方便呢,再也不用去创建那么多节点了

    然后你可能又会有疑问了,那么他的css样式怎么设置,嘻嘻,你猜对了,直接加上就好了

    element.innerHTML="<p class=“p-style”>"+"这是要添加的内容"+"<p>"

     。。待续

      

     

     

     

    展开全文
  • js动态创建元素
    展开全文
  • 如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解。 网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实,不管是什么 html 标签,...
  • Webdriver调用js设置元素属性

    千次阅读 2013-09-12 21:05:30
    如果对元素的操作执行时间超过设置的超时时限会抛出超时异常。 最近需要实现youtube视频上传页面的描述自动...解决方法就是在webdriver中调用js代码直接设置元素属性值而不需要一个一个字符输入。  publ

    如果对元素的操作执行时间超过设置的超时时限会抛出超时异常。

    最近需要实现youtube视频上传页面的描述自动填入,而webdriver只提供了一个sendkey方法一个一个字符输入文本,不仅慢而且不稳定,遇上大段文本执行时间会超过设置的超时时限导致抛出超时异常。

    解决方法就是在webdriver中调用js代码直接设置元素的属性值而不需要一个一个字符输入。

      public void JsSetValue(By by, string sValue)
            {
                SwitchTheWindow();
                try
                {
                    wait.Until(ExpectedConditions.ElementExists(by));
                }
                catch
                {
    
                }
                ReadOnlyCollection<IWebElement> eles = driver.FindElements(by);
                IWebElement ele = eles[0];
                IJavaScriptExecutor js = driver as IJavaScriptExecutor;
                js.ExecuteScript(string.Format("arguments[0].value='{0}';", sValue), ele);
                
            }
    展开全文
  • js获取、设置元素属性

    万次阅读 2019-07-25 18:52:01
    文章目录...属性名` 网页css和样式结构 #box{ width:100px; height:100px; } <div id="box" style="background:red;"></div> setAttribute 元素...


    网页css和样式结构

    #box{
        width:100px;
        height:100px;
    }
    
    <div id="box" style="background:red;"></div>
    

    setAttribute

    • 元素.setAttribute('属性名',属性值)
    • 设置元素的行间属性,如果原来有这个行间属性会覆盖原来的行间属性
    • 可以通过该方法给元素新增自定义行间属性
    var oBox = document.getElementById("box");
    oBox.setAttribute("width","200px");//给oBox对象新增行间属性width="200px",不能覆盖css样式中的width属性值
    oBox.setAttribute("class","myDiv");//给oBox对象新增行间属性class="myDiv"
    

    getAttribute

    • 元素.getAttribute('属性名')
    • 获取元素的行间属性对应的属性值,不能获取css样式对应的属性值
    • 如果获取的属性不存在返回null
    var oBox = document.getElementById("box");
    console.log(oBox.getAttribute("width"));//null
    

    getComputedStyle

    • 获取经过浏览器计算后的属性
    • 获取的结果是带单位的字符串
    • getComputedStyle是window对象的一个属性,属性值是一个方法。这个方法的返回结果是一个对象
    • 该方法具有兼容性问题,在ie8及以下版本不存在该属性
    var oBox = document.getElementById("box");
    console.log(getComputedStyle(oBox).width);//"100px"
    

    currentStyle

    • 在ie8及以下版本没有getComputedStyle属性,但是存在currentStyle属性。在ie9及以上版本均存在getComputedStyle、currentStyle属性。该属性名在谷歌浏览器不存在
    • 该属性时元素对象上的属性,对应的属性值是一个对象

    元素.style.属性名

    • 获取或设置元素的内置的行间样式属性
    • 返回的结果是带单位的字符串
    • 可以设置元素的内置行间样式属性,属性值是带单位的字符串
    var oBox = document.getElementById("box");
    oBox.style.width = "300px";//将盒子的宽度设置为300px
    
    展开全文
  • js、jquery获取、设置元素属性与样式

    千次阅读 2017-01-01 13:07:33
    javascript: 1: ele.style 只能获取写在元素标签中style属性中的值, 无法获取写在、和加载进来的样式属性 2:window.getComputedStyle("元素","伪类") 伪类eg: :before,没有则写为null 3:ele.currentStyle 是IE浏览...
  • 下面小编就为大家带来一篇快速解决js动态改变dom元素属性后页面及时渲染的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 解决js动态改变dom元素属性后页面及时渲染问题
  • Easyui和JavaScript原生代码用js动态添加元素属性有很大的区别: easyui根据class样式添加元素数字框:class="easyui-numberbox"$('#limitMin').numberbox({disabled:true}); 文本框:class="easyui-textbox"$('...
  • js设置修改获取元素属性总结

    千次阅读 2018-07-13 11:46:45
    js元素属性设置有3种方式1,通过value 例如:a.value2, 通过[value] 例如:a[value]3, 通过js方法 例如 : a.setAttribute('value')4, 获取属性 例如 : a.getAttribute('value')5,不同标签的value设置待续 ...
  • //jq方式删除、设置元素属性,为了更加形象些对比,这里采用嵌入式方式,没有进行js html分离 摘取天上星:http://blog.csdn.net/zqtsx function a(){ alert('测试jq添加onclick属性'); } //jq方式添加onclick属性 ...
  • 参考: js动态设置元素的宽高: https://blog.csdn.net/kerryqpw/article/details/72836291   ===》问题:   ===》解决:关键看:zTreeOnExpand() : ①思想:每次zTree伸缩事件触发后:拿到本次伸缩后,...
  • js/JQuery获取/设置元素属性

    千次阅读 2014-08-08 15:32:10
    1. 用JQuery 获取属性
  • @trs是一个JavaScript 1.6+库,用于设置供服务器端JavaScript使用的DOM元素属性。 要求 @trs需要支持,即XML的ECMAScript(E4X)。 支持的ECMAScript引擎:SpiderMonkey,TraceMonkey,ActionMonkey和Rhino。 用法 ...
  • js获取/设置元素属性

    千次阅读 2018-12-03 18:09:17
    可以像下面这样来获取和设置 var style = window.getComputedStyle( document.querySelector('.count'), ':before' ); var count = style.getPropertyValue("content"); style .setProperty('content', '...
  • JQuery设置元素属性和内容

    千次阅读 2018-08-27 11:03:35
    1.设置属性设置单个属性:$(选择器).attr("属性名","属性值") 设置多个属性:$(选择器).attr({属性名:"属性值",属性名:"属性值"…}) 这里的属性名可加引号也可不加...
  • JavaScript获取标签属性 先介绍两个常用方法: attr() 方法设置或返回被选元素属性和值。 当该方法用于返回属性值,则返回第一个匹配元素的值。 当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。 ...
  • document.getElementById(“标签id属性值”) 根据标签id属性值获取。非常常用!!! document.getElementsByName(name) 根据name获得元素,返回数组 document.getElementsByTagName(tagName) 根据标签名获得元素,...
  • 主要介绍了JavaScript动态改变div属性的实现方法,涉及javascript操作页面div元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了JavaScript实现动态添加、移除元素的方法,结合实例形式分析了javascript针对页面元素动态添加、移除、设置等相关函数与使用技巧,需要的朋友可以参考下
  • 如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解。  网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如div、li、img 这样的标签。其实,不管是什么 html 标签...
  • js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 542,742
精华内容 217,096
关键字:

js动态设置元素属性