html中设置圆角div,Javascript 圆角div的实现代码
现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片,如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。
实现后的调用代码 如下
var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px";
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="这是一个圆角div测试"
document.body.appendChild(objDiv.Div);
这样就产生了一个圆角div
实现原理:原理其实很简单,在div的top和bottom 加上三条线,用这三条线的不同长度来产生圆角的效果。
实现过程: 如何实现这三条线呢。 用 这个元素,将其高度 设置为1px 。如果要显示边框则为其添加左边框和右边框。添加好线条以后,将内容div 和这三条线放在一个容器里,这个容器也是一个div。最终返回一个div类,这个类放两个属性,一个是容器div,通过这个容器div可以控制图形出现的位置和大小高度等属性。另一个属性是内容div,通过这个div可以设置这个div的内容,margin,字体颜色,背景颜色,字体大小,等属性。
注意的问题: 调用 getRoundDiv 这个方法需要传递一个方法上下文。我的理解是方法上下文相当与一个指针,指向调用方法的对象。为什么要用这个方法上下文呢? 比如要在ie的 creatPopup 方法 产生出来的popup文档内新建一个圆角div的话,由于popup只能加载他自己创建的控件,所以可以将popup对象传递到方法内部,成为方法上下文指向的对象。 传递上下文的方法有两种function.call(obj,"arg1","arg2") 类似与这样。 另一种是 function.apply(obj,arguments)
详细代码如下:
/**************************************************************************/
/*RoundDiv.js 产生一个圆角div
调用前需设置函数上下文(上下文是指,要创建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函数参数argBorderStyle: 边框样式,字符串 例如 "1px solid black"
函数参数argBgColor: 背景颜色,字符串 例如 "#ffffff"
现在只支持边框为1像素 如果超过1像素产生的图形会比较奇怪
如果不设置边框 则没有边框 可以正常使用
本函数返回的是一个RoundDiv自定义类
如果要设置div的内容请用 obj.Content.innerHtml 或 obj.Content.innerText设置
如果要设置div的高度请用 obj.Div.style.width obj.Div.style.height设置
*/
/**************************************************************************/
/**************************************************************************/
//取得一个圆角div
function getRoundDiv(argBorderStyle,argBgColor){
//创建元素
var divPane =this.createElement("div")
var divContent =this.createElement("div")
var divContentMax =this.createElement("div")
var bTop =this.createElement("b")
var bBottom =this.createElement("b")
var bTop1 =this.createElement("b")
var bTop2 =this.createElement("b")
var bTop3 =this.createElement("b")
var bTop4 =this.createElement("b")
var bBottom1 =this.createElement("b")
var bBottom2 =this.createElement("b")
var bBottom3 =this.createElement("b")
var bBottom4 =this.createElement("b")
//背景设置
divPane.style.backgroundColor=argBgColor;
divContent.style.backgroundColor=argBgColor;
divContentMax.style.backgroundColor=argBgColor;
bTop1.style.backgroundColor=argBgColor;
bTop2.style.backgroundColor=argBgColor;
bTop3.style.backgroundColor=argBgColor;
bTop4.style.backgroundColor=argBgColor;
bBottom1.style.backgroundColor=argBgColor;
bBottom2.style.backgroundColor=argBgColor;
bBottom3.style.backgroundColor=argBgColor;
bBottom4.style.backgroundColor=argBgColor;
bTop.style.backgroundColor="#ffffff";
bBottom.style.backgroundColor="#ffffff";
//样式设置
bTop.style.overflow="hidden";
bBottom.style.overflow="hidden";
bTop1.style.overflow="hidden";
bTop2.style.overflow="hidden";
bTop3.style.overflow="hidden";
bTop4.style.overflow="hidden";
bBottom1.style.overflow="hidden";
bBottom2.style.overflow="hidden";
bBottom3.style.overflow="hidden";
bBottom4.style.overflow="hidden";
bTop.style.display="block";
bBottom.style.display="block";
bTop1.style.display="block";
bTop2.style.display="block";
bTop3.style.display="block";
bTop4.style.display="block";
bBottom1.style.display="block";
bBottom2.style.display="block";
bBottom3.style.display="block";
bBottom4.style.display="block";
//高度设置
divContent.style.height="100%";
divContentMax.style.height="100%";
bTop1.style.height="1px";
bTop2.style.height="1px";
bTop3.style.height="1px";
bTop4.style.height="2px";
bBottom1.style.height="1px";
bBottom2.style.height="1px";
bBottom3.style.height="1px";
bBottom4.style.height="2px";
//边框设置
divContentMax.style.borderLeft=argBorderStyle
divContentMax.style.borderRight=argBorderStyle
bTop1.style.borderLeft=argBorderStyle;
bTop1.style.borderRight=argBorderStyle;
bTop1.style.borderTop=argBorderStyle;
bTop2.style.borderLeft=argBorderStyle;
bTop2.style.borderRight=argBorderStyle;
bTop3.style.borderLeft=argBorderStyle;
bTop3.style.borderRight=argBorderStyle;
bTop4.style.borderRight=argBorderStyle;
bTop4.style.borderLeft=argBorderStyle;
bBottom1.style.borderLeft=argBorderStyle;
bBottom1.style.borderRight=argBorderStyle;
bBottom1.style.borderTop=argBorderStyle;
bBottom2.style.borderLeft=argBorderStyle;
bBottom2.style.borderRight=argBorderStyle;
bBottom3.style.borderLeft=argBorderStyle;
bBottom3.style.borderRight=argBorderStyle;
bBottom4.style.borderLeft=argBorderStyle;
bBottom4.style.borderRight=argBorderStyle;
//空白间距设置
bTop1.style.margin="0 4px 0 4px"
bTop2.style.margin="0 3px 0 3px"
bTop3.style.margin="0 2px 0 2px"
bTop4.style.margin="0 1px 0 1px"
bBottom1.style.margin="0 4px 0 4px"
bBottom2.style.margin="0 3px 0 3px"
bBottom3.style.margin="0 2px 0 2px"
bBottom4.style.margin="0 1px 0 1px"
//控件拼装
bTop.appendChild(bTop1);
bTop.appendChild(bTop1);
bTop.appendChild(bTop2);
bTop.appendChild(bTop3);
bTop.appendChild(bTop4);
bBottom.appendChild(bBottom4);
bBottom.appendChild(bBottom3);
bBottom.appendChild(bBottom2);
bBottom.appendChild(bBottom1);
divContentMax.appendChild(divContent)
divPane.appendChild(bTop)
divPane.appendChild(divContentMax)
divPane.appendChild(bBottom)
var objRoundDiv = new RoundDiv();
objRoundDiv.Div=divPane;
objRoundDiv.Content=divContent;
return objRoundDiv;
}
/**************************************************************************/
/**************************************************************************/
//自定义类(用来装载div对应内容)
function RoundDiv(){
this.content=0;//div内容
this.div=0;//div容器
}
/**************************************************************************/
html中设置圆角div,Javascript 圆角div的实现代码相关推荐
- 如何在div中设置背景图片并且自适应div大小
参考如下代码,设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下,仍然显示完全 <!DOCTYPE html> <html>&l ...
- java 代码智能提示,如何在Eclipse中设置Java、JavaScript、HTML智能代码提示
使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Act ...
- html div中显示pdf,使用Javascript从div中的HTML生成pdf
汪汪一只猫 jsPDF能够使用插件.为了使它能够打印HTML,您必须包含某些插件,因此必须执行以下操作:去https://github.com/MrRio/jsPDF下载最新版本.在项目中包括以下脚本 ...
- html js设置颜色渐变效果,Javascript 颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里 思路 每一种颜色由RGB组成,每两位为一个16进制数 当前颜色代码和目标颜色代码,转换成10进制数后,是 ...
- html如何布局div标签,用Div标签进行网页布局
一.插入Div标签 可以通过手动插入Div标签并对它放们应用CSS定位样式来创建页面布局.要添加Div标签,将插入点放置在要显示Div标签的位置,选择[插入]>[布局对象]>[Div标签] ...
- el-table中设置fixed后表格错位
el-table中设置fixed后表格错位 表格错位图片 代码 表格错位图片 图片: 错位原因: 在设置fixed后,横向的滚动条的高度没有占用设置了fixed属性列的高度,导致每次Y轴的滚动条滑动到 ...
- 如何在Python深度学习中设置GPU卡号
诸神缄默不语-个人CSDN博文目录 本文介绍在Python深度学习代码运行的过程中,如何设置GPU卡号(包括PyTorch和TensorFlow适用的写法),主要适用于单卡场景,以后可能会增加多卡场景 ...
- html中对局部图片进行圆角处理,CSS3实现DIV圆角效果完整代码
复制代码代码如下: CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园 font-family: Arial; border: 2px solid #379082; border-radi ...
- 怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
- html给div加圆角边框,border-radius是向元素添加圆角边框的方法
原标题:border-radius是向元素添加圆角边框的方法 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px ...
最新文章
- 深度学习不得不会的迁移学习Transfer Learning
- Matlab周期图法使用FFT实现
- Flot使用文档(转)
- TensorFlow 1.9开始支持树莓派
- 人造流星这种生日礼物,你有过吗?现在国外有了
- Apache Lucene中的并发查询执行
- Codeforces Round #361(div 2)
- python退出mainloop_不要阻塞tkinter的mainloop
- echarts js 删除框选数据_ECharts进行区域选择
- ID3决策树预测的java实现
- 拦截器与过滤器的区别
- 软件测试正交矩阵,正交矩阵在测试用例设计中的应用
- 针对测试人员,这些业务安全漏洞你是否会测?
- 国内提供paas平台的有_国内十大paas平台
- 永恒之蓝方程式利用工具使用教程
- MS104-SH4 与Toppers/JSP(µItron)嵌入式系统构筑
- linux中查看系统进程的四种方法
- 女朋友让我深夜十二点催她睡觉,我用Python轻松搞定!
- 【PTA】7-14 福到了
- 基于 Python 的音乐流派分类
热门文章
- Centos7 Zabbix监控部署
- win10计算机变成了英文,win10变成英文【处理方式】
- 如何用纯 CSS 创作一个均衡器 loader 动画
- 多频段压缩参数均衡器:Initial Audio Dynamic EQ Mac
- [MIT 6.S081] Lab 4: traps
- python怎么输出键值对_python 获取字典键值对的实现
- word如何添加艺术字体
- java litjson_.NET平台开源JSON库LitJSON的使用方法
- 一文看尽 2020 年谷歌 AI 重大突破
- 视频教程-GO语言打造区块链视频教程-区块链