<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        body{font-size: 12px;}
        #text{width: 600px;height: 400px;border:1px solid #333333 ;padding: 5px;}
        p{line-height: 18px;text-indent: 2em;}
    </style>
    <body>
        <h2 id="con">js交互</h2>
        <form>
            <input type="button" value="改变颜色" onclick="changecolor()"/>
            <input type="button" value="改变宽高" onclick="changewh()"/>
            <input type="button" value="隐藏内容" onclick="changehide()"/>
            <input type="button" value="显示内容" onclick="changeshow()"/>
            <input type="button" value="取消设置" onclick="cancel()"/>
        </form>
        
    </body>
    <script type="text/javascript">
        //changecolor
        function changecolor(){
            var a1=document.getElementById("con");
            a1.style.color="#FF0000";
        }
        function changewh(){
            var a1=document.getElementById("txt");
            a1.style.width="300px";
            a1.style.height="300px";
        }
        function changehide(){
            var a1=document.getElementById("con");
            a1.style.display="none";
        }
        function changeshow(){
            var a1=document.getElementById("con");
            a1.style.display="block";
        }
        function cancel(){
            var c=confirm("取消所有设置？");
            if(c){
                document.getElementById("txt").style.cssText="null";
            }
            
        }
    </script>
</html>

js简单函数（动态交互）的更多相关文章

  1. Js与flash交互：在html页面中用js与MyReport插件交互

    Html页面与flash的加载 如下图,flash是html页面的一个插件节点. js与flash进行交互,首先要处理好html页面和swf的加载问题. Swf调用外部js方法,要确保js方法已存在, ...

  2. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  3. （转载）JS与WebView交互存在的一些问题

    JS与WebView交互存在的一些问题 作者 隔壁的李小宝 关注 2015.06.09 19:30 字数 2896 阅读 11117评论 3喜欢 35 一.背景概述 2013年Android平台暴露出 ...

  4. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  5. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  6. 初探JavaScript（二）——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  7. js的动态加载、缓存、更新以及复用（四）

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  8. JS怎么动态命名变量名

    [摘要]本文是对JS怎么动态命名变量名的讲解,对学习JavaScript编程技术有所帮助,与大家分享. 1.用eval,例子: 1 2 3 4 5 6 7 <script> var Thr ...

  9. CEF3开发者系列之JS与C++交互之一

    JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...

  10. js与C++交互及C++解析json

    转载:http://zhidao.baidu.com/link?url=LLuWzwMmpfVcQeSGv1CrAfRXpnZaetm9xypqwMW6zxLhhKES-rITAsG0-Ku-bSMA ...

随机推荐

  1. selenium + python + firefox 测试环境的搭建与配置

    对于做UI自动化,如果是纯编写一段自动化测试程序,那么后续的维护成本会较高.这种情况下,借助 selenium 这款自动化系测试工具,辅助于自己编写部分脚本,将是个不错的选择.selenium 本身支 ...

  2. git分支的创建、删除、切换、合并

    需求背景 开发新功能和修改bug一般放在新建分支,如果觉得可行,可以合并到master分支上. 方式 1.查看分支 git branch (查看本地分支及当前所属分支) git branch -a ( ...

  3. STM32之串口DMA接收不定长数据

    STM32之串口DMA接收不定长数据 引言 在使用stm32或者其他单片机的时候,会经常使用到串口通讯,那么如何有效地接收数据呢?假如这段数据是不定长的有如何高效接收呢? 同学A:数据来了就会进入串口 ...

  4. windows服务器多端口Redis安装步骤

    1.从官网获取最新稳定版redis文件.按端口号复制多个文件,比如6379和6380端口的文件包, 修改各自Conf文件的port号,分别为6379和6380.然后重命名为redis6379.conf ...

  5. 基于OAuth 2.0的第三方认证 -戈多编程

    引用(http://www.cnblogs.com/artech/p/oauth-01.html) OAuth 2.0的角色 获得资源拥有者授权的第三方应用请求受保护的资源采用的不是授权者的凭证,所有 ...

  6. from..import 语句

    from..import 语句 如果你希望直接将 argv 变量导入你的程序(为了避免每次都要输入 sys.),那么你可以通过使用 from sys import argv 语句来实现这一点. 警告: ...

  7. Java学习笔记之封装与继承

    封装 1,将属性定义为私有的(private)   不能通过  对象名.属性  来直接访问,但是可以通过方法来间接的访问, 2,封装的意义:公有属性可以被随意修改,并且不能被程序察觉.封装后,别人通过 ...

  8. 数据挖掘：python数据清洗cvs里面带中文字符

    数据清洗,使用python数据清洗cvs里面带中文字符,意图是用字典对应中文字符,即key值是中文字符,value值是index,自增即可:利用字典数据结构没有重复key值的特性,把中文字符映射到了数 ...

  9. PHP 数组转json格式，key的保存问题

    <?php $arr = [ 2, 3, ]; echo print_r($arr,true); echo json_encode($arr); echo "\n\n"; $ ...

  10. ARM64架构下，OpenJDK的官方Docker镜像为何没有8版本

    为什么需要ARM64架构的OpenJDK8的Docker镜像 对现有的Java应用,之前一直运行在x86处理器环境下,编译和运行都是JDK8,如今在树莓派的Docker环境运行(也可能是其他ARM环境 ...