React 中style的使用
2015-11-05 21:13
573 查看
React中style的使用和直接在HTML中使用有些不同,第一,React中必须是style="opacity:{this.state.opacity};"这种写法,第二如果多个style格式如下,多个style中间使用逗号分割
但是在html中我们通常直接使用,多个style中间使用分号;
<div style="backgroundColor:#FFFF90; color:#FFFFFF">white text2</div>
<!-- div标签内使用style属性设置字体颜色 -->
<span style="backgroundColor:#FFFF90" ><a style="color:#FF00FF" href="http://www.baidu.com" >nihao</a> </span>
代码示例给出一个表格中文本的颜色和文本框背景颜色的示例:
最终效果图如下:
[code]var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix };
但是在html中我们通常直接使用,多个style中间使用分号;
<div style="backgroundColor:#FFFF90; color:#FFFFFF">white text2</div>
<!-- div标签内使用style属性设置字体颜色 -->
<span style="backgroundColor:#FFFF90" ><a style="color:#FF00FF" href="http://www.baidu.com" >nihao</a> </span>
[code]
代码示例给出一个表格中文本的颜色和文本框背景颜色的示例:
</pre><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../build/react.js"></script> <script src="../build/JSXTransformer.js"></script> <script src="../build/react-bootstrap/react-bootstrap.min.js" type="text/javascript"></script> <link rel="stylesheet" href="../build/bootstrap/css/bootstrap.min.css"> </head> <body> <div id="example"></div> <script type="text/jsx"> var Table = ReactBootstrap.Table; var TableDemo = React.createClass({ render: function() { var textColor = "#CC0000"; var bgColor = "#00CC00"; return ( <Table striped bordered condensed hover> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td style={{color: textColor}}>1textColor</td> <td style={{color: textColor,backgroundColor:'#00CC00'}}>MarkColorAndbgColor</td> <td style={{backgroundColor:bgColor}}>OttobgColor</td> <td><a href="http://www.baidu.com" style={{color: '#CC0000'}}>HrefColor</a></td> </tr> <tr> <td>2</td> <td>Jacob</td> <td style={{backgroundColor:'#00CC00'}} > <a href="http://www.baidu.com" style={{color: '#CC0000'}}>HrefColorAndbgColor</a> </td> <td>NameFull2</td> </tr> <tr> <td>3</td> <td colSpan="2">Larry the Bird3Column</td> <td>@twitter</td> </tr> </tbody> </Table> ); } }); React.render(<TableDemo/>, document.body); </script> </body> </html>
最终效果图如下:
相关文章推荐
- 七周七种前端框架二: React 之概览
- react-native (faceBook 开源项目初探)
- ReactJs入门教程-精华版
- React Native基础教程
- ReactiveCocoa - iOS开发的开源框架
- 最快让你上手ReactiveCocoa之基础篇
- React-Native学习指南
- React-native单元测试框架-Jest
- React
- React Native
- React Native探索(三):与 react-web 的融合
- 深入浅出React(二):React开发神器Webpack
- 深入浅出React(一):React的设计哲学 - 简单之美
- ReactMotion Demo8 分析
- ReactiveCocoa - iOS开发的新框架
- React Native Android Cookie Problem
- ReactiveCocoa2 源码浅析
- ReactionCocoa 登陆界面
- ReactiveCocoa Weak-Strong Dance
- 细说ReactiveCocoa的冷信号与热信号(二):为什么要区分冷热信号