CSS inline style

1. CSS can help users complete the following tasks in the page:

Visible and hidden effects: Realized with the help of CSS display and visibility. Combined with fade, fade and various animation sequences, you can design complex visual effects
Size scaling: Use CSS width and height to achieve. Common in deformation animation, such as designing images, columns, page expansion, contraction, etc.; dynamically controlling the size of the target object, designing changing page layouts, etc.
Object positioning: use CSS position, left, top, right, and bottom, etc., which are common in displacement animation, such as developing web games
View control: using CSS clip, overflow, visibility, you can dynamically control the display mode and display content of page objects
Transparent design: Use CSS opacity, generally used in conjunction with show-hide, zoom, and displacement animations to enhance the gradual and fading effect
Object effects: dynamically change font style, text layout, web page layout, etc., design image special effects, etc.
UI interaction: Design powerful interactive tables and interactive forms with CSS+HTML, and design web skins with changes

Two, three ways to introduce css style sheets:

1) The
concept of inline style (inline style) : Inline style and interline style are used to set the style of the element through the style attribute of the label;

Basic grammar

<标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>

Disadvantages: no separation of style and structure

2) Internal style sheet (embedded style sheet)

It is to centrally write the css code in the head tag of the HTML document and define it with the style tag;

Basic syntax:

<head>
    <style type="text/css">
        div{
            color: red;
            font-size: 12px;
        }
    </style>
</head>

Disadvantages: not completely separated

3) External style sheet (external link)

Concept: Put all styles in one or more external style sheet files with .css extension, and link the external style sheet files to the HTML document through the link tag;

Basic syntax:

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

note:

link is a single label;
The link tag should be placed in the head tag, and the three attributes of the link should be specified;

Attributes:

rel: Define the relationship between the current document and the linked document, where it needs to be specified as "stylesheet", which means that the linked document is a style sheet file;
type: defines the type of the linked document;
href: Define the url of all linked external stylesheet files, which can be an absolute path or a relative path;

Disadvantages: Need to introduce

Mainly talk about the style of the industry

3. Operate the style of the line;

Many properties of CSS have compound names from time to time, using hyphens "-", such as border-right, margin-left, etc., but in the script (js code), the hyphen will be defined as a minus sign, and it will automatically parameter expressions. The operation; to solve this problem, you need to use small hump names: borderRight, marginLeft, etc.

1. Use the style object:

elementNode.style.fontFamily="Arial,Helvetica,sans-serif";

elementNode.style.cssFloat="left";//float是js中的保留字，需要使用cssFloat来表示float属性

elementNode.style.color="#ff0000";

elementNode.style.width="100px";//单位不能遗漏

elementNode.style.top=top+"px";//设置动态属性

2. Use the getPropertyValue() method , which was not supported by early IE, but directly use elementNode.style.width to access style properties:

var value=elementNode.style.getPropertyValue(propertyName)

Example:

window.onload = function(){
var  box = document.getElementById("box");//获取<div id="box">
var  width = box.style.getPropertyValue("width");
<=>var width = box.style.width
box.innerHTML = "盒子宽度："+width；
var marginLeft=box.style.getPropertyValue("margin-left"); //需要连字符的样式属性
box.innerHTML = "盒子外边距："+marginLeft；
}

3. The setProperty() method : set the style for the specified element; it is not compatible with earlier IE, elementNode.sytle.width = "500px";

elementNode.setProperty(propertyName,value,priority); // 参数解释：属性名，属性值，是否设置！important优先级
window.onload = function(){
var  box = document.getElementById("box");//获取<div id="box">
box.style.setProperty("width","400px","");
box.style.setProperty("height","400px","");

//兼容早期的IE
 box.style.width= "400px";
box.style.height = "400px";
}

4. The removeProperty() method : remove the style declaration of the specified CSS

 elementNode.removeProperty(propertyName)

5. The item() method : returns the CSS property name at the specified index position in the style object

element.style.item(index)；

6, getPropertyPriority () method : Get whether the specified css property is attached! important, return important if there is, an empty string if not

<div id="box" style="width: 100px;height: 100px;background-color: red;border: solid 50px blue;"></div>

window.onload = function(){//不兼容IE
                var box=document.getElementById("box");
                box.οnmοuseοver=function(){
                    box.style.setProperty("background-color","blue","");
                    box.style.setProperty("border","solid 50px red","");
                }
                box.οnclick=function(){
                    box.innerHTML=(box.style.item(0)+":"+box.style.getPropertyValue("width"));
                    box.innerHTML=box.innerHTML+"<br>"+(box.style.item(1)+":"+box.style.getPropertyValue("height"));
                }
                box.οnmοuseοut=function(){
                    box.style.setProperty("background-color","red","");
                    box.style.setProperty("border","solid 50px blue","");
                }

 window.onload = function(){//兼容ie
                var box=document.getElementById("box");
                box.οnmοuseοver=function(){
                    box.style.backgroundColor="blue"
                    box.style.border="solid 50px red";
                }
                box.οnclick=function(){
                    box.innerHTML="width:"+box.style.width;
                    box.innerHTML=box.innerHTML+"<br>"+"height:"+box.style.height;
                }
                box.οnmοuseοut=function(){
                    box.style.backgroundColor="red";
                    box.style.border="solid 50px blue";
                }
            }

Extension: Non-IE browsers support style access, but it cannot get the attribute name of the specified serial number in the style object. You can use the cssText attribute to get all the style attribute values, and use the split() of String to convert the string to an array and then operate;

Use the getAttribute("style") method to get the attribute value of style, but this method returns the value to retain the original appearance of the style attribute value, for example, the color uses rgb,

The return value of cssText may be processed by the browser, and the return value of different browsers is slightly different

<div id="box" style="width: 600px;height: 200px;background-color: #81F9A5;border: solid 2px blue;padding:10px;"></div>

 window.οnlοad=function(){
                  var box=document.getElementById("box");
                  var str=box.style.cssText;//获取全部style属性的字符串
               //var str=box.getAttribute("style");
                  var a=str.split(";");
                  var temp="";
                  for(var b in a){
                      var prop=a[b].split(":");
                      if(prop[0]){
                          temp+=b+" : "+prop[0]+"="+prop[1]+"<br>";
                      }
                  }
                  box.innerHTML="box.style.cssText="+str;
                  box.innerHTML=box.innerHTML+"<br><br>"+temp;
              }

Conclusion: If you want to learn the front-end or are learning the front-end, you can add this skirt: 953352883, there are front-end whites in the skirt, and there are front-end bosses. You can get the front-end learning materials for free when you enter the skirt, and the front-end interview questions are looking forward to you To join.

1. CSS can help users complete the following tasks in the page:

Two, three ways to introduce css style sheets:

3. Operate the style of the line;

Guess you like