Home Web Front-end JS Tutorial Code to set css properties through javascript_javascript tips

Code to set css properties through javascript_javascript tips

May 16, 2016 pm 06:37 PM
css properties javascript

1. Transparency:
If a background color or a background image is not specified for a text, then the background of this element is usually transparent.
This is very important. If an absolutely positioned element with text is placed on top of an element with text, it will be very confusing. Then we can cover it by setting a background image or background color. , if necessary, we can set its display to "transparent" (transparent)
The general css for setting transparent elements is as follows:

Copy code The code is as follows:

opacity:.75;//ff new
-moz-opacity:.75;// transparency for older Mozillas
filter :Alpha(opacity=75);//for IE

2. CSS with hyphens:
Camel style naming:
Copy code The code is as follows:

element.style.fontFamily = "sans-serif";
element.style. borderLeftWidth = "5px";
element.style.zIndex = 100;

3. Things to note:
Copy code The code is as follows:

var padding_left = 50;
element.style.left = padding_left "px";//Don’t forget to add Unit
var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin "px" rigntMargin "px" bottomMargin "px" leftMargin "px";

4. Set float
Copy code The code is as follows:

element.style.cssFloat = "left";//firefox chrome opera
element.style.styleFloat = "left";//IE
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does groove mean in css What does groove mean in css Apr 28, 2024 pm 04:12 PM

In CSS, groove represents a border style that creates a groove-like effect. The specific application is as follows: Use the CSS property border-style: groove; the groove-shaped border has a concave inner edge, a raised outer edge and a shadow effect.

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to set html dotted border How to set html dotted border Apr 05, 2024 am 09:36 AM

In HTML, you can set the border to a dotted line through the CSS border-style attribute: determine the element to which you want to set a dotted border, for example, use the p element to represent a paragraph. Use the border-style attribute to set the dotted line style. For example, dotted represents a dotted line, and dashed represents a short dashed line. Set other border properties, such as border-width, border-color, and border-position, to control border width, color, and position.

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

How to set the background image in layui How to set the background image in layui Apr 26, 2024 am 02:45 AM

There are two ways to set the background image in layui: using CSS style: body { background-image: url("path/to/image.jpg"); } using layui API: layui.use('element', function() { element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

The key optimization mode to improve website speed, every front-end developer must master! The key optimization mode to improve website speed, every front-end developer must master! Feb 02, 2024 pm 05:36 PM

A must-have for front-end developers: master these optimization modes and make your website fly! With the rapid development of the Internet, websites have become one of the important channels for corporate promotion and communication. A well-performing, fast-loading website not only improves user experience, but also attracts more visitors. As a front-end developer, it is essential to master some optimization patterns. This article will introduce some commonly used front-end optimization techniques to help developers better optimize their websites. Compressed files In website development, commonly used file types include HTML, CSS and J

How to solve the header misalignment problem of WordPress website? How to solve the header misalignment problem of WordPress website? Mar 01, 2024 am 09:54 AM

How to solve the header misalignment problem of WordPress website? When you encounter head misalignment issues on your WordPress site, it can be confusing and frustrating. This problem may be caused by a variety of reasons, such as CSS style errors, Javascript conflicts, plug-in issues, etc. In this article, we will discuss how to solve the header misalignment issue in WordPress and provide specific code examples. 1. Check CSS Styles First, check your theme CSS style sheet for errors or conflicts.

See all articles