如何通过js给div的style动态赋值

如何通过js给div的style动态赋值,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,填充问题基础代码。

2、在indexhtml中的<script>标签,输入js代码:$('#div2')height($('#div1')height());。

3、浏览器运行indexhtml页面,此时div2的高度被设置成和div1一致了。

js什么意思:全称JavaScript,是运行在浏览器上的脚本语言,连续多年被评为全球最受欢迎的编程语言。

js相关介绍:

1、JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式风格。

2、js是一种脚本语言,是不需要进行编译的,也是浏览器中的一部分,经常用在web客户端脚本语言,主要是用来给html增加动态功能。一般情况下,html页面主要是用于静态内容的显示,网站都会有一些表单和幻灯片,这些都是使用js来进行交互,其实还有一些语言在可以编写脚本,实际上都是js。

3、js可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验;还可以根据用户的操作,动态的创建页面。主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络速度相当缓慢,验证步骤浪费的时间太多。

4、Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

5、Javascript(JS)是一种脚本语言,主要用于Web。它用于增强HTML页面,通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此,它不需要编译。JavaScript以交互式和动态的方式呈现网页。这允许页面对事件做出反应,展示特殊效果,接受可变文本,验证数据,创建cookie,检测用户的浏览器等。

当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签:

1创建某个标签:如下在body中创建一个div的事例;

<script>

function

fun(){

var

frameDiv

=

documentcreateElement("div");//创建一个标签

var

bodyFa

=

documentgetElementById("bodyid");//通过id号获取frameDiv

的父类(也就是上一级的节点)

bodyFa

appendChild(frameDiv);//把创建的节点frameDiv

添加到父类body

中;

}

<script>

<body

id="bodyid"

>

<!--在此添加div标签-->

</body>

2添加属性:给创建的标签添加相应的属性:

frameDiv

setAttribute("id",

"divid");//给创建的div设置id值;

frameDiv

className="divclass";

//给创建的div设置class;

//给某个标签添加显示的值;

var

h

=

documentcreateElement("h1");

hinnerHTML

=

data[i]name;

var

p

=

documentcreateElement("p");

pinnerHTML

=

"要显示的值";

3创建的标签添加事件:

a不带参数:

frameDivonmousedown

=

fun;//ps:函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数,

而不是鼠标按下时执行;

b有参数:

frameDivonmousedown

=

function(){

fun(this);

}

c要调用的函数;

function

fun(){

alert("鼠标按下");

}

4如果担心创建的标签没有被覆盖则可以替换:

var

divFlag

=

documentgetElementById("divFlag");

var

divMain

=

documentcreateElement("div");

if(divFlag

!=

null){

bodyreplaceChild(divMain,

divFlag);//把原来的替换掉

}

divMainsetAttribute("id",

"divFlag");

以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:JS实现给对象动态添加属性的方法JS中动态创建元素的三种方法总结(推荐)js动态创建标签示例代码使用变量动态设置js的属性名

欢迎分享,转载请注明来源:表白网

原文地址:https://h5.hunlipic.com/biaobai/4024873.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2024-04-10
下一篇2024-04-10

发表评论

登录后才能评论

评论列表(0条)

    保存