代码如下：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>仿css样式选择器</title>
    <style type="text/css">
        #textid{
            height: 100px;
            width: 300px;
           
        }
        #fontid{
            height: 20px;
            width: 300px;
           
        }
        #selid{
            width: 300px;
        }
    </style>
    <script type="text/javascript">
        function changeText(){
            /*拿到select的节点*/
            var selNode = document.getElementById("selid");
            /*将option中的值赋给textfont作为样式*/
            var textfont = selNode.options[selNode.selectedIndex].value;
            /*拿到欲变化的文本节点*/
            var textidNode = document.getElementById("textid");
            /*拿到底部的提示文本的节点*/
            var fontidNode = document.getElementById("fontid");
            var spanidNode = document.getElementById("sid");
            /*通过文本节点对象的style属性将样式赋给该文本*/
            textidNode.style.textTransform = textfont;
            /*在底部提示区域显示所选择的样式*/
            spanidNode.innerHTML = textfont;
        }
    </script>
</head>
<body>
    <div id="textid">
        Good Good Study,Day Day Up!
    </div>
    <p></p>
    <select id="selid" onchange="changeText()">
        <option value="none">----text-transform----</option>
        <option value="capitalize">首字母大写</option>
        <option value="uppercase">全部大写</option>
        <option value="lowercase">全部小写</option>
    </select>
    <p></p>
    <div id="fontid">文本格式：<span id="sid"></span></div>
</body>
</html>

JS实战 · 仿css样式选择器的更多相关文章

  1. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  2. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

  3. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  4. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  5. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  6. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  7. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  8. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. aliyun阿里云Maven仓库地址——加速你的maven构建

    maven仓库用过的人都知道,国内有多么的悲催.还好有比较好用的镜像可以使用,尽快记录下来.速度提升100倍. http://maven.aliyun.com/nexus/#view-reposito ...

  2. <HTML>菜鸟入门基础须知

    将持续更新-- 一,基础常用标签and属性 既然要学习这门知识,那必须得先知道这是什么能做什么,HTML:是一种超文本标记语言,什么意思呢,我拆开看一下,超(超链接)文本(犹如TXT)标记(改变成自己 ...

  3. Java EE之搭建论坛系统（使用JForum）

    1.下载JForum开源压缩包: 网址:http://jforum.net/  (或者直接使用百度云中的压缩包) 解压,修改解压后文件下的\WEB-INF\config\database\mysql目 ...

  4. Codeforces Round #388 (Div. 2) - A

    题目链接:http://codeforces.com/contest/749/problem/A 题意:给定一个数n,求把n分解成尽量多的素数相加.输入素数个数和具体方案. 思路:因为要尽量多的素数, ...

  5. npm 基础

    npm账户 npm adduser npm whoami 初始化项目: npm init --scope=<username> 项目必要文件 README.md pageage.json: ...

  6. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  7. Sprint计划

    团队: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...

  8. twitter.common.concurrent deadline and defer

    此defer非golang中的defer https://tour.golang.org/flowcontrol/12 from twitter.common.concurrent import Ti ...

  9. Python中的map( )和reduce( )

      1.变量可以指向函数,也可以使用变量和参数的形式完成函数调用.   2.那么函数名是什么呢?函数名其实就是指向函数的变量!对于abs()这个函数,完全可以把函数名abs看成变量,它指向一个可以计算 ...

  10. Python之路第一课Day5--随堂笔记（模块）

    本节课程大纲: 1.模块介绍 2.time &datetime模块 3.random 4.os 5.sys 6.shutil 7.json & picle 8.shelve 9.xml ...