操作样式表基本示例
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>动态修改样式表基本示例</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<link id="linkcss" rel="stylesheet" type="text/css" href="assets/link.css">
<style id="my-style">
.style{
width: 300px;
height: 200px;
margin-top: 20px;
border: 1px #ccc solid;
}
.style p{
color : #30418C;
}
</style>
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js" data-config="{combine:true}"></script>
</head>
<body>
<div style="width:90%;margin:0 auto;">
<h1>动态修改样式表基本示例</h1>
<div class="link">
<h3>动态修改“链接式”link样式表</h3>
<p>通过link标签引入了id="linkcss"的样式表，点击下面按钮改变这个样式表定义的样式</p>
<button id="change-link-css" class="ks-button ks-button-default">点我把这个容器的文字颜色变成红色</button>
</div>
<div class="style">
<h3>动态修改内联样式表</h3>
<p>通过style标签引入了id="my-style"的样式表，点击下面按钮改变这个样式表定义的样式</p>
<button id="change-style-css" class="ks-button ks-button-default">点我把这个容器p标签的文字颜色变成红色</button> <br/>
<button id="get-p-styletext" class="ks-button ks-button-default" style="margin-top:10px;">点我查看 .style 的cssText</button>
</div>
</div>
<script type="text/javascript">
require(['node', 'stylesheet'], function($, StyleSheet){
var linkStyleSheet = new StyleSheet('#linkcss');
$('#change-link-css').on('click', function(ev){
linkStyleSheet.set('.link',{
color : 'red'
});
});
var innerStyleSheet = new StyleSheet('#my-style');
$('#change-style-css').on('click', function(ev){
innerStyleSheet.set('.style p',{
color : 'red'
});
});
$('#get-p-styletext').on('click', function(ev){
alert(innerStyleSheet.get('.style'));
});
})
</script>
</body>
</html>