首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
html
hover
requirejs
cookies
firefox
上传
layout
javascript
textview
chart.js
base64
ajax
json
chart
postman
正则
npm
js
svg
css3
html5
react
checkbox
node.js
firebug
button
jquery
focus
vue
scheme
charts
webkit
v8
vue.js
dom
icons
css
build
view
listview
dialog
overflow
yarn
bootstrap
scroll
微信开发
chrome
jq
hybrid
iframe
label
当前位置:
开发笔记
>
前端
> 正文
Js动态创建div_javascript技巧
作者:上善若水纯_310 | 来源:互联网 | 2018-05-14 01:56
因为功能需要,需要动态创建DIV
这是原来的CSS样式
.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; height:
250px;background-repeat: no-repeat; background-image:url(../images/bgred.jpg)}
.curve{position:relative;width:320px; height:250px; z-index:1; left: 75px; top: -40px;}
动态创建DIV代码如下:
for(j = 0;j*8
{
var myp = window.frames["displayFrame"].document.createElement("p");
myp.setAttribute("id","itemp"+j);
myp.style.styleFloat="left";
myp.style.overflow="hidden";
myp.style.marginLeft="8px";
myp.style.marginTop="10px";
myp.style.width="320px";
myp.style.height="250px";
myp.style.backgroundRepeat="no-repeat";
myp.style.backgroundImage="url(image/bgred.jpg)"
window.frames["displayFrame"].document.body.appendChild(myp);
var curvep =window.frames["displayFrame"].document.createElement("p");
curvep.setAttribute("id","curvep"+j);
curvep.style.position="relative";
curvep.style.zIndex=1;
curvep.style.left="75px";
curvep.style.top="-40px";
curvep.style.width="320px";
curvep.style.height="250px";
window.frames["displayFrame"].document.getElementById("pitem"+j).appendChild(curvep);
}
把p元素增加到HTML里面.
也可在HTML里面定义一个SPAN
window.frames["displayFrame"].document.getElementById("spanId").appendChild(myp);
window.frames["displayFrame"].document.body.appendChild(myp);
IE和Firefox都支持.
另外需要注意的是这个CSS元素
浮动效果:float:left
在IE下代码为:myp.style.styleFloat="left";
在Firefox代码为: myp.style.cssFloat="left";
其他的诸如这种元素:
在CSS编写中一般是:margin-left:8px
而在动态增加需要去掉- :myp.style.marginLeft="8px";
关于大小写敏感问题没有仔细研究.
css
html
firefox
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
jquery
Voicewo在线语音识别转换jQuery插件的特点和示例
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
firefox
CSS |网格行结束属性
CSS|网格-行-结束属性原文:https://www.gee ...
[详细]
蜡笔小新 2023-10-17 15:21:56
firefox
css元素可拖动,如何使用CSS禁止元素拖拽?
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
js
lua语言闭包、模式匹配、日期、编译、模块的特性及应用
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
json
VScode格式化文档换行或不换行的设置方法
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
js
基于layUI的图片上传前预览功能的2种实现方式
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
js
ABAP开发发送邮件程序的配置和代码整理
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
js
动态规划算法的基本步骤及最长递增子序列问题详解
本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ...
[详细]
蜡笔小新 2023-12-13 15:38:19
js
Java验证码——kaptcha的使用配置及样式
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
js
指针的引用以及在什么情况下使用指针的引用
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29
js
工程中添加Android Dependencies
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
firefox
网页播放视频的三种实现方式
本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ...
[详细]
蜡笔小新 2023-12-10 13:24:30
javascript
常用的CSS属性及用法整理
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
firefox
CSS背景位置y | backgroundpositiony
css,背景,位置,y,background, ...
[详细]
蜡笔小新 2023-10-16 16:28:38
js
this prototype 闭包 总结
this对象整理下思路:一般用到this中的情景:1.构造方法中functionA(){this.nameyinshen;}varanewA() ...
[详细]
蜡笔小新 2023-10-16 13:42:47
上善若水纯_310
这个家伙很懒,什么也没留下!
Tags | 热门标签
html
hover
requirejs
cookies
firefox
上传
layout
javascript
textview
chart.js
base64
ajax
json
chart
postman
正则
npm
js
svg
css3
html5
react
checkbox
node.js
firebug
button
jquery
focus
vue
scheme
RankList | 热门文章
1
孤影SOLO国服黄忠,怒秀“V8枪法”轻松取胜,有哪些操作和出装细节值得学习?
2
02.软件项目管理与敏捷方法——PMBOK Guide到敏捷方法的映射笔记
3
今日心情
4
idea 中使用maven命令
5
html正方形框架,长方形框架的制作方法
6
html cols跨两列,html – CSS奇怪,甚至有2个cols
7
jQuery动画二级下拉菜单
8
GitHub之旅 (一)
9
命名锚的语法
10
Angular6项目因为路由太多,开发时刷新后异常的慢
11
jQuery Easyui,表格对应工具栏的使用,具体实现
12
为了一个小众软件,第一次写了个“最佳实践指南”,欢迎各位大佬批评斧正
13
孙家第三代掌勺人[晚餐之菠萝炒饭]
14
vue i18n 多语言文本指定位置动态改变 如何实现占位替换?
15
BootstrapTable 排序
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有