一:通过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. [daily][device][bluetooth] 蓝牙怎么办!(archlinux下驱动蓝牙鼠标,以及三星手机)

    去年地摊买的破无线鼠标坏掉了.看上微软的Designer Mouse蓝牙鼠,但是买之前我要确认我能不能驱起来. 这款鼠标只支持蓝牙4.0.系统支持windows8以上,不支持xp和windows7. ...

  2. 解决微软的两个恶心问题(VS2008死机、Win2008 WAS无法启动)

    1.Visual Studio 2008,在切换到Web设计界面或Html Markup界面时,过一段时间就出现假死,点击任何地方没反应,也关闭不了,只能用任务管理器结束任务. 上网查了下,应该是先装 ...

  3. ManualResetEvent和AutoResetEvent的区别实例

    ManualResetEvent和AutoResetEvent的作用可以理解为在线程执行中插入停顿点flag终止程序运行,然后通过设置flag的状态来使得程序继续运行. 两者的区别是:ManualRe ...

  4. Redis-分布式

    package test.jedis; import java.util.HashSet; import java.util.Set; import org.junit.Test; import re ...

  5. 【Android测试】【第七节】Monkey——源码浅谈

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4713466.html 前言 根据上一篇我们学会了Monke ...

  6. MSVC和MinGW组件dll相互调用

    http://www.mingw.org/wiki/msvc_and_mingw_dlls MinGW调用VC: The other way is to produce the .a files fo ...

  7. [LeetCode]题解(python):112 Path Sum

    题目来源 https://leetcode.com/problems/path-sum/ Given a binary tree and a sum, determine if the tree ha ...

  8. git 项目初始化

    1.在git服务器界面右上角“+” .create  new  project ,写上项目名字生成一个新的组 2.如果机器第一次与git 建立连接,需要让机器生成一个id_rsa和id_rsa.pub ...

  9. Task多线程

    Task多线程  1.首先是我们线程之间的启动. 1.这样 Task task = new Task(()=> { // System.Threading.Thread.Sleep(); Con ...

  10. 微信公众平台开发(84) 小i机器人

    很多朋友询问如何开发小黄鸡之类的智能聊天机器人,但遗憾的是小黄鸡接口申请页面在最近几个月里都无法访问,且使用时限制太大,我们找了另一个接口:小i机器人.本文介绍如何在微信公众平台中使用小i接口开发智能 ...