CSS column-rule-style 属性 详解
css3基础 2022-07-14 16:04:17小码哥的IT人生shichen
CSS column-rule-style 属性
实例
设置列之间的颜色规则：
div {
column-rule-style: dotted;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
column-rule-style:dotted;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-rule-style 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面底部有更多实例。
CSS 语法
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
属性值
| 值 | 描述 | 测试 |
|---|---|---|
| none | 定义没有规则。 | 测试 |
| hidden | 定义隐藏规则。 | 测试 |
| dotted | 定义点状规则。 | 测试 |
| dashed | 定义虚线规则。 | 测试 |
| solid | 定义实线规则。 | 测试 |
| double | 定义双线规则。 | 测试 |
| groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 | 测试 |
| ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 | 测试 |
| inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 | 测试 |
| outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 | 测试 |
技术细节
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.columnRuleStyle="dotted" |
更多实例
完整实例【Column-count】：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
把 div 元素中的文本划分为三列。
完整实例【Column-gap】：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
将 div 元素中的文本分为三列，并列间 30 像素的间隔。
完整实例【Column-rule】：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
规定列之间的宽度、样式和颜色。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
完整实例1：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" checked="checked" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="hidden" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="dotted" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="dashed" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="solid" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="double" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="groove" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="ridge" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="inset" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px; }
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
-moz-column-count:3;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-rule-width:3px;
}
div#DemoArea
{
column-count:3;
column-rule-style:none;
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-width:3px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>column-rule-style:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="outset" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="none" />none</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="hidden" />hidden</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="dotted" />dotted</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="dashed" />dashed</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="solid" />solid</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="double" />double</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="groove" />groove</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="ridge" />ridge</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="inset" />inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="outset" />outset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
column-count:3;
column-rule-style:<span id="CodeValue">none</span>;
column-rule-width:3px;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.columnRuleStyle=strValue;
document.getElementById(strId).style.WebkitColumnRuleStyle=strValue;
document.getElementById(strId).style.MozColumnRuleStyle=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!=""){
test_demo_val(PreVal)
var x=document.getElementsByTagName("input")
var l=x.length
for (i=0;i<l;i++){
if (x[i].value==PreVal){
x[i].checked=true
}
}
}
}
function test_demo(obj){
test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
