一：通过JavaScript的方式设置样式（:拿习题为例）：
var shuiguo = document.getElementById('fruit');
shuiguo.style.backgroundColor = 'Red'; //1
shuiguo.onclick = function () {
shuiguo.style.cssText = "background-color:green;font-size:20px;"; //2
}
1:style.属性=属性值；这里把CSS里面的”background-color“的横线去掉，后面单词首字母大写，这种写法的其他属性书写格式一致；
2：style.cssText后的样式跟CSS样式书写格式相同；
二：通过jQuery的方式设置样式，首先需要导入jQuery库，引入到程序中，并且jQuery库的文本标签要在自定义标签之上：
<script src="jquery/jquery-2.1.1.js"></script> //jQuery库的标签
// 这里的标签在VS2012版本之前应该是 <script src="jquery/jquery-2.1.1.js" type="text/javascript"></script>显示的
<script type="text/javascript"> //自定义标签
$(function () {
$('#fruit').css("color", "yellow").css("background-color","pink"); //1
var $obj = $('#fruit').click(function () {
$obj.css("font-size","30px");
});
})
</script>
1：.css("属性名"，”属性值“)；其中background-color或backgroundColor等书写方式都可以！
2：如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：
$(function(){
var divcss = {
background: '#EEE',
};
$("#fruit").css(divcss);
}
)
三：练习题随机数抛水果的游戏：
window.onload = function () {
var shuiguo = document.getElementById('fruit');
shuiguo.style.backgroundColor = 'Red';
shuiguo.onclick = function () {
shuiguo.style.cssText = "background-color:green;font-size:20px;";
fa();
}
}
function fa() {
var fruits = ["apple", "orange", "banana", "watermelon"];
var num = Math.floor(Math.random() * fruits.length + 1);
alert(fruits[num-1]);
}
这里随机数用到了JavaScript里Math对象，它是全局对象，不需要创建，它的常用方法有：
ceil():对数进行上舍入 如：Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()：对数进行下舍入 如Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round():把数四舍五入为最接近的数 Math.round(25.5);返回26 Math.round(-25.5);返回-26
random():返回0-1中的随机数 Math.random();
random()方法返回的随机数不包括0和1，且都是小数
如果希望返回的整数为2-99之间，中间有98个数字，最小值为2，最大值为99，则代码应该：
Math.floor(Math.random()*98+2);
这里Math.random()出的最小值*98在0和1之间，再+2向下取整，所以最小值为2；Math.random()出的最大值也都小于1，所以Math.random()*98<1*98
也就是最大值在97.多+2向下取整最大值也就是99；