一:通过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;

通过JavaScript设置样式和jQuey设置样式,还有随机数抛出水果的习题的更多相关文章

  1. JavaScript通过ID和name设置样式

    JavaScript通过ID和name设置样式 1.说明 (1)根据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") ...

  2. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  3. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

  4. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  5. 学习微信小程序之css4设置颜色,单位表示,字体样式

    颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

  6. 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  7. UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

  8. phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...

  9. WPF后台设置xaml控件的样式System.Windows.Style

    WPF后台设置xaml控件的样式System.Windows.Style 摘-自 :感谢 作者: IT小兵   http://3w.suchso.com/projecteac-tual/wpf-zhi ...

随机推荐

  1. JS获取Cookie值

    function GetLoginCookie() { var userCookie = getCookie("mycookie"); var loginname = userCo ...

  2. Scala Tail Recursion (尾递归)

    Scala对尾递归进行了优化,甚至提供了专门的标注告诉编译器需要进行尾递归优化.不过这种优化仅限于严格的尾递归,间接递归等情况,不会被优化. 尾递归的概念 递归,大家都不陌生,一个函数直接或间接的调用 ...

  3. Mixing Delphi and C++(相互调用)

    Mixing Delphi and C++ You have a TStringList and <algorithm>. What can you do? Quite a lot, ac ...

  4. 企业服务总线(ESB)

    思考: 1.ESB的定义到底是什么?是一款产品还是一种架构模式? 2.ESB有何实际用处? 定义ESB 对于企业服务总线(Enterprise Service Bus),目前还没有公认的定义,根据供应 ...

  5. RTSP 协议分析

    RTSP 协议分析1.概述: RTSP(Real Time Streaming Protocol),实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学.网景和RealNetwor ...

  6. 10 Ways to Inspire Your Team

    Inspire. Just the word itself causes us to pause and think. We may remember our own personal heroes ...

  7. 【转】ViewPager实现一个页面多个Item的显示

    转自:http://billyyuan.iteye.com/blog/1941538 ViewPager实现一个页面多个Item的显示 博客分类: android   代码在: https://cod ...

  8. SDUT2165:Crack Mathmen(快速幂)

    题目:http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2165&cid=1431 快速幂. #include <iostream> ...

  9. [BS-12] JSON的基础知识--百科

    JSON的基础知识--百科 http://baike.baidu.com/view/136475.htm

  10. 第十四篇 Integration Services:项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...