Home > Developer > JavaScript

Related knowledge: JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Related knowledge: JavaScript

JavaScript is a programming language that is widely used for interactive effects in Web sites and applications.

JavaScript can interact with styles, and you can write programs to dynamically change the style of elements on a document.

There are three ways to achieve this:

    • Control style Sheets-you can add, delete, and modify style sheets.
    • Control style rules-you can add, delete, and modify style rules.
    • Controls a single element in the DOM-you can modify the element style without relying on the style sheet.
More details
To learn more about JavaScript, you can go to this wiki JavaScript.
Example: an instance of JavaScript

Create a newdoc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：

<! DOCTYPE html>>><title>mozilla CSS Getting started-javascript Demonstration</title><linkRel="Stylesheet"Type="Text/css"Href="Style5.css"/><scriptType="Text/javascript"Src="Script5.js"></script>><body>>javascript sample><divId= "Square "> </div><button>click me</button ></body>

To create a new CSS file style5.css , copy and paste the following style code into the file:

#square { width: 20em; height: 20em; border: 2px inset gray; margin-bottom: 1em; } button { padding: .5em 2em; }

Create a new JavaScript file script5.js , copy and paste the following code into the file:

JavaScript Demonstrationvar changebg=function(Event){Console.Log("Method called");var me= Event. Target, Square= document.getElementById("Square"); Square. style. backgroundcolor="#ffaa44"; Me.SetAttribute("Disabled","Disabled");SetTimeout(function(){Cleardemo(Me)},2000);}functionCleardemo(Button){var square= document.getElementById("Square"); Square. style. backgroundcolor="Transparent"; button.RemoveAttribute("Disabled";} var button = document.< Span class= "token function" >queryselector (;button.addeventlistener ( "click" ;console< Span class= "token punctuation". log (Button

Open the HTML file with your browser and click the button.

Here's an online example: Here's the Live Example

JavaScript Demonstration

JavaScript Demonstration
Important Notes：
    • HTML documents are linked to CSS files and JavaScript files.
    • The script modifies the style of the DOM element directly and changes the style of the button by modifying the value of the property.
    • document.getElementById("square")functionally with CSS selectors in JavaScript#square的功能是类似的。
    • In JavaScript code, backgroundColor corresponds to a CSS property background-color . Because JavaScript is not allowed to appear in the name of the underlined, so the use of camel-style, the wording to do instead.
    • The browser has built-in CSS rules for the button button[disabled="true"] , which causes the buttons to appear in a non-clickable style that is not the same as expected.
Challenge
Modify the script code to achieve the following effect: When the color changes, let the block jump to the right 20em distance, and then back to the original position.

Here's a solution example: see a solution to this challenge.

Related knowledge: JavaScript

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
iptables related wordpress related related posts widget wordpress names related to time statement of related cases related articles wordpress wordpress related articles
Related Article
Http status code: 301, 302 redirection, 302 redirection
Ajax and 302 response code Testing

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More