js中dom对象当实参传入函数中,然后修改dom对象属性在页面中不生效

js函数实参传入的原理

问题:我创建了2个函数changepic和moveto(elem)函数,在changepic函数中 调用moveto函数并直接传入dom对象,在moveto函数中修改dom对象属性,但是在页面上不生效的问题,实在找不出问题出在哪了。附上代码

结构

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>  
<link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>

<body>


        <div class="wrap" id="a">
            <div class="view">
                <ul>
                    <li><img src="images/01.jpg" /></li>
                    <li><img src="images/02.jpg" /></li>
                    <li><img src="images/03.jpg" /></li>
                    <li><img src="images/04.jpg" /></li>
                    <li><img src="images/05.jpg" /></li>
                </ul>
            </div>
        </div>




<script src="js/check_tools.js"></script>
<script>
    window.onload=function(){
        changepic('a');

        }   
</script>
</body>
</html>

js




/******************元素移动函数***************************/   
function move_to(elem){
        alert(elem);
        var l=elem.style.left;
        var t=elem.style.top;
        elem.style.left="0px";
        /*if(!l){
            l=-200;
            k=l+"px";
            alert(k);
            elem.style.left=k;
            }
        if(!t){
            t=300;
            elem.style.top=t+"px";
            }*/
        }
/*****************改变图片位置***************************/    
function changepic(myitem){
    /***初始化****/
    var mitem=document.getElementById(myitem);
    var img_width=400;
    var ul=mitem.getElementsByTagName("ul")[0];
    var lis=ul.getElementsByTagName("li");
    var ul_width=img_width*lis.length;
    var str="";
    var timer1=null;
    var timer2=null;
    var time_interval=100;
    ul.style.left="-100px";
    //ul.style.top="0px";
    for(var i=0; i<lis.length;i++){
        str+="<button type='button'>"+(i+1)+"</button>";
        }
    mitem.innerHTML+=str;
    /*****调用元素移动函数*****/
    move_to(ul);
    }

css

 @charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px}
ul{ list-style:none}


.wrap{ width:400px; border:1px solid; margin:10px; text-align:center;}
.wrap button{ height:20px; width:20px; margin:5px; border:none}
.wrap .view{ height:260px; width:400px; position:relative; /*overflow:hidden;*/}
.wrap .view ul{ white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;}
.wrap .view li{ display:inline;}

1个回答

不是回过你了,重新获取ul对

http://ask.csdn.net/questions/322600

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue 修改data中的数组和对象,DOM却不刷新-qq_31906065的博客

问题如题。看了官方文档。 给出了这样的解释。 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var vm = new Vue({ data: { item...

JS HTML DOM对象和脚本函数的互调用(字符串标识)-江南北

从目标对象到script函数的调用: Js引擎会根据字符串值,搜索上下文,获取指定类型名字的目标对象,对目标对象执行函数。 当然onclick=message()也是可以调用的(js函数是非字符串形式)。 也可以从script函数获取目标对象的属性和方法: 从 JavaScript 访问某个 HTML 元素(目标对象),通过ID,标签名查询到目标对象 ,参数也是字符串。 通过 id

给dom对象付onclick事件-功不唐捐,玉汝于成。

在javascript中,有时候需要动态改变 onclick事件,可以这么做:var newA=document.createElement(A);newA.onclick=function(){  alert(1);}

DOM对象的dataset属性-write less,do more

HTML5规定DOM对象中有个dataset属性对象,可以在该对象中存一些与该DOM对象相关的数据。如上写法是在生成dom对象时对dataset的一个初始化的动作,dataset中会存在一个id属性和age属性。这里需要注意data-仅仅是一个约定好的前缀,在生成DOM对象时所有已data-开头的属性会将其去掉前缀data-后存在dataset中。

javascript三种获取dom对象的方法-so fabulous~

1、getElementById() getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML) } This is a header Click on the heade

【Angular4学习】--DOM属性绑定生效过程(2)-魂断楼兰的博客

前言 上篇文字我们分析了HTML属性和DOM属性的区别与联系,这篇文章小编将详细分享DOM属性生效的整个过程。 图示过程 解析过程 1. 当控制器中的值发生变化时,angular启动单向绑定机制来更新dom,即从控制器的greeting属性到dom的value属性,将dom属性的值改成greeting属性值,即“A value” 2. Angular的dom属性不...

js onclick事件 传递this对象-ios开发工程师--周玉的博客

在js代码中给事件函数传入this对象的方法: 一、首先是标签对象的代码,如下: 二、然后是js里对传过来的this的引用,下面的这个obj就是传过来的this: 之后便可以对这个obj对象进行DOM操作。

元素js_存dom对象表格增删以及编辑-hey

原生js增删以及编辑表格 今天学习了用Js动态的添加一行数据,具体需求和效果是,有三个(可以是多个)文本框让用户输入信息,这里以用户名,电话,地址,为例子,当用户点击确定提交的时候,吧用户输入的文本信息动态的添加到当前表格中,并为每行添加三个操作按钮,一个用于删除当前添加的信息(删除),一个是用于修改当前添加的信息(修改),一个是用户保存用户修改以后的信息(保存),添加完当前行信息以后,情况当前

解决js动态改变dom元素属性后页面及时渲染问题-forestcat的专栏

今天实现一个进度条加载过程,dom结构其实就是两个div 1 class="pbar"> 2 class="ui-widget-header" id="percent_bar" style="width: 23%;">div> 3 /div> 控制里层div的宽width属性,就能实现进度条往前走的效果。 我的进度条是显示下载文件的进度,简单实现一共100个文件的话,下载一个就1%,

javaScript学习(一)之DOM简单操作修改内容和标签属性-lei2879223426的博客

代码效果:

DOM对象触发事件的一些解-qq402164452的博客

Web浏览器中的JavaScript实现允许我们定义响应用户事件(通常是鼠标或者键盘事件)所执行的代码。在支持Ajax的现代浏览器中,这些事件处理函数可以被设置到大多数可视元素之上。我们可以使用事件处理函数将可视用户界面(即视图)与业务对象模型相连接。   传统的事件模型在JavaScript诞生的早期就存在了,它是相当简单和直接的。DOM元素有几个预先定义的属性,可以赋值为回调函数。例如,为了

JQuery 中this和$(this)获取对象、操作DOM对象的元素属性-u013887254的专栏

$("#row a img").each(function(index){ alert($(this)); alert(this); } //可以看出来$(this)是jquery对象,而this是DOM对象: alert($(this)); 弹出的结果是[object Object ] alert(this); 弹出来的是[objec

dom对象中常见节点的属性-findsafety的专栏

onload = function(){         // 常见的节点属性         // 1.nodeValue表示节点的值 所有的节点都有该属性 一般文本节点才会使用          // var a=document.body.lastChild.nodeValue;         // console.log("+"+a+"+");

Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。-haiziguo的专栏

Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。 * Vue 监听不到深层次的对象属性或者数组值的改变。* 数组更改检测注意事项 由于JavaScript的限制,Vue不能检测以下变动的数组: 当使用索引直接改变或者设置一个项时,例如:vm.items[index] = newvalue 当修改数组的长度时,例如:vm.items.lenght = newValue l...

js--dom--添加事件的时候传递参数的方法-安静的对折的专栏

1.js的位置必须是dom节点之后,否则就会说找不到节点。   click here init(); function init() {   document.getElementById("myHeader").onclick = test(33); //必须放在这,如果放在head中的话,就会说找不到myHeader节点 } function test

取得的dom对象,对其中的值的获取-sub 的专栏

1.取得的元素是dom对象,其中值的获取用$(dom).innerHTML; 2.如果要对当前dom对象添加属性,使用$(dom).setAttribute(‘’,‘’); 3、关于option标签的让其选中,使用属性“selected”,true;

javascript中的对Attr(dom中属性)操作-wust_cyl的博客

20120430dom操作属性节点.htm //Attr(属性)虽然是节点 但是不能用firstChild和childNodes等访问 function testBtn() { // var myNode = document.getElementById("btn");//得到element标签

JavaScript中对DOM对象进行操作-小漠007的专栏

一、什么是DOM对象  DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。 二、DOM节点树  在HTML中所有的事物都有节点,DOM将HTML文档视作节点树,通过DOM,节点树中的是所有节点都可以通过JavaScript进行访问,所有的HTML元素都可以被修改、创建、删除。 三、DOM对象方法

js中如何通过单击事件获取当前对象,并传递当前对象到函数中?-dancy的博客......

例:var  str = “点我”, 其中this不需要加引号。

dom元素通过js修改后页面没有改变-ios0213的专栏

现象是,我通过js改变 id为myModalLabel的值,通过console口打印都是对的。但是页面没有变化。remove也不可以。就是dom无法操作了。&amp;lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&amp;gt;直播添加&amp;lt;/h4&amp;gt; //js代码 $(&quot;#myModalLabel&quot;).html(&quot;直播编辑&quot;);原因:dom中id重复,浏览器引擎不知

js中函数传入dom对象后,在函数内修改dom对象属性后不生效?-weixin_41929877的博客

# js函数传参问题rn问题描述:rn 我在script标签中声明了一个changepic函数和一个move_to(elem)函数,move_to(elem)函数用于rn 移动元素,在changepic直接传入dom对象,在move_to函数中直接修改传入的dom对象的属性,但是修改完属性之后页面中的元素不生效,找了半天也没找到原因,希望能有人帮我一下啊!rn js代码:rnrnrn```rn /******************元素移动函数***************************/ rnfunction move_to(elem)rn alert(elem);rn var l=elem.style.left;rn var t=elem.style.top;rn elem.style.left="0px";rn /*if(!l)rn l=-200;rn k=l+"px";rn alert(k);rn elem.style.left=k;rn rn if(!t)rn t=300;rn elem.style.top=t+"px";rn */rn rn/*****************改变图片位置***************************/ rnfunction changepic(myitem)rn /***初始化****/rn var mitem=document.getElementById(myitem);rn var img_width=400;rn var ul=mitem.getElementsByTagName("ul")[0];rn var lis=ul.getElementsByTagName("li");rn var ul_width=img_width*lis.length;rn var str="";rn var timer1=null;rn var timer2=null;rn var time_interval=100;rn ul.style.left="-100px";rn //ul.style.top="0px";rn for(var i=0; i";rn rn mitem.innerHTML+=str;rn /*****调用元素移动函数*****/rn move_to(ul);rn rnrn rnrnrn rn 无标题文档 rn rnrnrnrnrn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rnrnrnrn@charset "utf-8";rn/* CSS Document */rn* margin:0px; padding:0pxrnul list-style:nonernrnrn.wrap width:400px; border:1px solid; margin:10px; text-align:center;rn.wrap button height:20px; width:20px; margin:5px; border:nonern.wrap .view height:260px; width:400px; position:relative; /*overflow:hidden;*/rn.wrap .view ul white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;rn.wrap .view li display:inline;rn```rnrn

JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)-a303944689的博客

ocument对象使我们可以用JavaScript对 HTML 页面中的所有元素进行访问。要访问 HTML 页面中元素,除可以用Document对象中的方法外,还可以通过Document对象的属性。Document对象的属性和方法中有的可返回单个Element元素对象,有的会返回一个HTMLCollection元素集合对象,其中保存了对锚、表单、链接以及其他元素的引用。 Document对象

angularjs 向元素内的方法传入自身-tasty

在js当中,是这样做的 function onClick(e){                  var id=e.getAttribute("data-id");                 var name=e.getAttribute("data-name");                  alert("Id: "+id+" ; Name: "

Dom 中绑定onclick时间获取对象以及event的方法-wrian_ban的小晴天

当Dom中绑定了click时间时,我们需要获取当前节点,可以在onclick事件中传值this来获取,例如: var oLi=$('') function Click(target){ var e=window.event || arguments.callee.caller.arguments[0]; e.preventDefault();         e.stopPropag

JS基础_DOM属性和操作-程序猿之洞

DOM操作1. 事件1.1 概述JS是以事件驱动为核心的一门语言1.2 事件三要素 事件源、事件、事件驱动程序a、获取事件源 获取事件源一共5种 document.getElementById(“box”); document.getElementsByTagName(“div”); document.getElementsByClassName(“leiming”); 要求掌握上面三

使用js改变DOM样式的三种方式 - style属性-lieyanhaipo的专栏

改变dom节点样式最简单的方式是设置dom的style属性. hello world var node=document.getElementById("a"); node.style.color="red";  以上代码等同于 : hello world

vue(数据改变,DOM不渲染问题)-m_dreamer的博客

  1、组件内部,属性值地址空间内引用地址改变,DOM不能渲染。      问题举例:this.items = [[],[],[],[]]   1、在items 中,修改任意一项数组中的值,DOM是不会更新的, 2、解决方案: this.items = [...this.items]。通过解构赋值,重新给items赋值。 2、组件之间传值,父组件传data改变,子组件未更新。 ...

DOM中常用的属性-keepcoding

DOM中常用的属性1.innerHTML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <a id="link" href="http://www.baidu.com">百度</a> <script type="text/javascript"> var node = d

你真的了解jQuery的ready函数吗?当 DOM(文档对象模型) 已经加载,就执行ready里的代码。DOM何时加载完毕?jQuery对html局部操作,DOM为什么不重新加载?-forestcat的专栏

你真的了解jQuery的ready函数吗? 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。 那么什么时候DOM加载完成呢? 答案是: 浏览器相应完某个http url请求得到所有f12的最终html代码,并展现给用户。 即算有的html代码都展现完毕的时候,DOM对象就算加载完毕了。 证据

JavaScript学习——DOM获取和设置属性-code the future

1.getAttribute是一个函数。它只有一个参数——你打算查询的属性的名字: object.getAttribute(attribute) getAttribute方法不属于document对象,所以不能通过document对象进行调用。例如,可以与getElementsByTagName方法合用。 获取每个元素的class属性,如下所示: var paras = doc

JavaScript中通过id和name属性获取Dom元素-lx_1024的博客

    在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性,而在一个html页面中,this===window 一、通过id属性获取 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;g

如何得到浏览器 DOM 对象的所有属性和方法-秋雨梧桐

可以得到各种浏览器的DOM对象属性方法function showObject(obj) { var ms = [] for(var m in obj) ms.push(m) ms.sort() var html = "" for (var i in ms) {  var m = ms[i]  html += m + ": " + obj[m] + "/n" } html += "" doc

JavaScript DOM文档对象和编写DOM脚本-风烟

JavaScript在Web开发中的主要作用是与用户交互,在网页上添加某种行为。JavaScript允许在网页加载到浏览器中后,完全改变网页的所有方面,JavaScript在网页上提供这个功能的基础是文档对象模型(Document Object Model,DOM),这是网页的树状表示方法。DOM为开发人员提供了一种表示网页中的所有元素的方式,以便在JavaScript中通过一组通用的属性和方法来访

JS事件--事件对象之DOM中的事件对象-fengbird的博客

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event对象,但支持方式不同。兼容DOMr浏览器会将一event对象传入到事件处理程序中。无论指定的事件处理程序时使用

dom对象模型-浏览器对象的分层结构图-天下无敌庞成勇

参考:http://wenku.baidu.com/view/4d39af1959eef8c75fbfb365.html###

浅谈原生JS操作DOM常用的属性和方法-回忆

① 获取所有子节点对象 childeNodes  ② 获取第一个子节点 firstChild    ③ 获取最后一个子节点 lastChild     ④ 获取父节点 parentNode   ⑤ 获取下一个兄弟节点 nextSibling ⑥ 获取前一个兄弟节点 previousSibling ⑦ 获

js改变DOM样式的三种方式-maoguiyou的专栏

方法一: 最简单也是最直接的方法就是直接修改DomNode的style属性: 如下面的代码`var node = document.getElementById('node'); node.style.color = 'red';方式二: 因为表现应该是表现层的也就是css所所的事,所以可以这样代码如下: var node = document.getElementById('node');

【JavaScript】JavaScript的对象-在函数中修改参数值的问题-姜丝的博客

在函数中修改参数值的问题 将基本数据类型的变量作为函 数参数传递的情况: function changeValue(x) { x=5; } var x=3; changeVlaue(x); alert(x);//此处的x为多少? 其实形参是局部变量,当函数调用结束以后,用作形参的局部变量就会 不存在。即使在函数中修改了传

js之DOM操作中获取属性方法-melodyfreedom的博客

getElementsByName()方法 返回带有指定名称的节点对象的集合。 语法: document.getElementsByName(name) 与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。 注意: 1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组

DOM(包括获取元素节点的方法以及获取和设置元素节点的属性)-竹君子之家

 1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。 2.对象:DOM中的“O” 对象是是一种自足的数据集合,与某个特定对象相关联的变量被称为这个对象的属性;只能通过某个特定对象去调用的函数称为这个对象的方法。 js中对象分为三种: (1)用户自定义对象 (2)内建对象:内建在js中的对象。包括

JS DOM 绑定的三种方法-qq_33142257的博客

测试一下

JavaScript之DOM节点类型 、遍历节点、节点的属性以及节点方法-自由理想的足迹

先介绍一下节点类型都有哪些:一、节点类型节点类型    属性nodeType返回值    元素节点1属性节点2文本节点3注释节点(comment)8document9DocumentFragment11所以一般我们获取节点类型用  nodeType二、遍历节点树这种遍历可以遍历  文本类节点、注释节点、元素节点等。  任何浏览器都好使。&amp;lt;div &amp;gt; &amp;lt;strong&amp;gt;...

JavaScript HTML DOM节点类型之Element类型(Element对象)-u013239236的专栏

在HTML DOM中,所有部分都可以认为是节点,Element对象表示 HTML 元素。Element是Document的一个子对象,Element对象接口描述了所有元素所普遍具有的方法和属性, HTML DOM中所有的元素都继承自Element对象。 1. Element对象 HTML DOM中,Element对象表示 HTML 元素。Element对象可以拥

vue修改对象的属性值后页面不重新渲染-请叫我大师兄

最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: {{ item.name}} 编辑 js部分如下:

vue中通过v-for循环遍历得到的值如何加到dom节点的属性中以及vue将多选框选中的值渲染到页面-u013557576的专栏

话不多说直接上代码 &amp;lt;script&amp;gt; Vue.component('CheckBox',{ props:{ values:{ type:Array }, }, data(){ ...

2016.11.11 HTML DOM(对象方法 属性 访问 修改)-maid_04的博客

对象方法:getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。getElementsByClassName()     返回包含带有指定类名的所有元素的节点列表。appendChild()把新的子节点添加到指定节点。removeChild()删除子节点。replaceChild()替换子节点。insertBefore()在指定的子节点前面插

javaScript中的对象、BOM、DOM知识点总结-aphy358的博客

一、  什么是javaScript对象?         对象是javaScript中最重要的API。         javaScript包含多种对象有:内置对象、外部对象(window对象、dom对象)、自定义对象。 二、  如何使用对象?         对象包含属性和方法。         访问对象属性:对象.属性         访问对象方法:对象.方法() 三、  常用内

html 中的属性(property)以及DOM对象中的attributes的详解-id_no_chinese的博客

先来讲讲今天的主题: 探索property(也就是html的某些属性,比如input的value id这些自带属性)和attributes(html中能看到的所有属性,包括自定义属性)的差异 先来讲讲本"勃主"对这两个玩意的定义: property: 指的是html 标签自带的属性,比如input 的value,id这些特有的属性,也就是说在w3c标准里面有提到的属性 attributes:

DOM:获取元素和获取设置属性-woniuguanjun的专栏

1、document对象的方法 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 open()                     打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 close()            

js 向dom对象中存储变量-qq_38761664的博客

这是一个赋值、取值的方法,一开始看到的时候怎么也找不到把值存在哪里了,后来把dom对象打印出来才了解其中的原理,我利用这个原理写了这个方法,希望您能提出宝贵的意见和建议

相关热词 c# 局部 截图 页面 c#实现简单的文件管理器 c# where c# 取文件夹路径 c# 对比 当天 c# fir 滤波器 c# 和站 队列 c# txt 去空格 c#移除其他类事件 c# 自动截屏
立即提问