//圆角边框js.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="js/rance.js" type="text/javascript"></script>
<style type="text/css">
body
{
margin: 20pt;
font: 11pt "lucida grande" , verdana, sans-serif;
}
#rc
{
width: 300px;
background-color: #C3D9FF;
color: #565B78;
padding: 10px 10px 10px 10px;
}
#rc2
{
width: 300px;
background-color: #313131;
color: #fff;
padding: 20px 20px 20px 20px;
}
#rc p
{
margin: 0 0 0 0;
}
</style>
<script type="text/javascript">
function init() {
// id为“rc”的<div>元素添加圆角
AddRoundCorner("rc");
// id为“rc2”的<div>元素添加圆角
AddRoundCorner("rc2");
}
</script>
</head>
<body οnlοad="init();">
<div id="rc">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare ultricies
libero. Donec fringilla, eros at dapibus fermentum, tellus tellus auctor erat, vitae
porta magna libero sed libero. Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.
</p>
</div>
<br />
<div id="rc2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare ultricies
libero. Donec fringilla, eros at dapibus fermentum, tellus tellus auctor erat, vitae
porta magna libero sed libero. Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.
</p>
</div>
</body>
</html>
//rance.js
function setStyle(ele, style) {
for (p in style) {
ele.style[p] = style[p];
}
}
// 获取ele元素的样式属性
function getStyle(ele, name) {
// ele元素的style对象
var style = ele.currentStyle ? ele.currentStyle :
document.defaultView.getComputedStyle(ele, null);
// 返回name属性值
return style[name];
}
function $(id) {
return document.getElementById(id);
}
//下面分别通过createB1～createB5函数来创建b1～b5元素，相关代码如下。
// 所有<b>元素都具有的样式属性
var basicStyle = {
"display": "block",
"overflow": "hidden",
"height": "1px",
"fontSize": "1px"
};
function createB1(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 设置基本样式属性
setStyle(b, basicStyle);
// 设置b1特有的样式属性
var style = {
"margin": "0 6px",
"backgroundColor": bgColor
};
setStyle(b, style);
return b;
}
function createB2(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 设置基本样式属性
setStyle(b, basicStyle);
// 设置b2特有的样式属性
var style = {
"margin": "0 4px",
"borderLeft": "2px solid " + borderColor,
"borderRight": "2px solid " + borderColor,
"backgroundColor": bgColor
};
setStyle(b, style);
return b;
}
function createB3(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 设置基本样式属性
setStyle(b, basicStyle);
// 设置b3特有的样式属性
var style = {
"margin": "0 3px",
"borderLeft": "1px solid " + borderColor,
"borderRight": "1px solid " + borderColor,
"backgroundColor": bgColor
};
setStyle(b, style);
return b;
}
function createB4(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 设置基本样式属性
setStyle(b, basicStyle);
// 设置b4特有的样式属性
var style = {
"margin": "0 2px",
"borderLeft": "1px solid " + borderColor,
"borderRight": "1px solid " + borderColor,
"backgroundColor": bgColor
};
setStyle(b, style);
return b;
}
function createB5(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 设置基本样式属性
setStyle(b, basicStyle);
// 设置b5特有的样式属性
var style = {
"height": "2px",
"margin": "0 1px",
"borderLeft": "1px solid " + borderColor,
"borderRight": "1px solid " + borderColor,
"backgroundColor": bgColor
};
setStyle(b, style);
return b;
}
//基于以上的createB1～createB5函数，我们可以很容易地创建圆角的上下两部分，对应的函数分别为createTop和createBottom，它们的代码如下。
function createTop(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 依次添加b1~b5
b.appendChild(createB1(borderColor, bgColor));
b.appendChild(createB2(borderColor, bgColor));
b.appendChild(createB3(borderColor, bgColor));
b.appendChild(createB4(borderColor, bgColor));
b.appendChild(createB5(borderColor, bgColor));
return b;
}
function createBottom(borderColor, bgColor) {
// 创建<b>元素
var b = document.createElement("b");
// 依次添加b5~b1
b.appendChild(createB5(borderColor, bgColor));
b.appendChild(createB4(borderColor, bgColor));
b.appendChild(createB3(borderColor, bgColor));
b.appendChild(createB2(borderColor, bgColor));
b.appendChild(createB1(borderColor, bgColor));
return b;
}
//接下来介绍函数AddRoundCorner，该函数的功能是为指定的元素添加圆角，它将完成以下的工作：
//® 创建一个新的<div>元素作为容器；
//® 创建圆角边框的上下两部分；
//® 将圆角边框和指定的元素放入容器中。
//以下是AddRoundCorner函数的代码。
function AddRoundCorner(id) {
// 需要添加圆角的页面元素
var originEle = $(id);
// 宽度
var width = parseInt(getStyle(originEle, "width"));
// 左边补白
var paddingLeft = parseInt(getStyle(originEle, "paddingLeft"));
// 右边补白
var paddingRight = parseInt(getStyle(originEle, "paddingRight"));
// 边框颜色
var borderColor = getStyle(originEle, "backgroundColor");
// 背景色
var bgColor = getStyle(originEle, "backgroundColor");
// 用于放置圆角及originEle元素的容器
var wrapper = document.createElement("div");
// 设置宽度样式属性
setStyle(wrapper, {"width" : (width + paddingLeft + paddingRight) + "px"});
// 将容器添加到文档
originEle.parentNode.insertBefore(wrapper, originEle);
// 添加上半部分的圆角
var top = createTop(borderColor, bgColor);
wrapper.appendChild(top);
// 将originEle元素放置到wrapper容器内部
wrapper.appendChild(originEle);
// 添加下半部分的圆角
var bottom = createBottom(borderColor, bgColor);
wrapper.appendChild(bottom);
}
6290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
