日度归档:2020年6月23日

css 代码中width属性详细说明


摘要:
下文讲述css代码中width属性的相关说明,如下所示:


width属性功能说明

width属性值用于设置html元素的宽度

width属性语法:
     width:auto|<length>|<percentage>
---------参数值说明-------
默认值:auto
    适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
<length>:
       用长度值来定义宽度。不允许负值
<percentage>:
         使用百分比来定义宽度。
    百分比参照包含块宽度。不允许负值
width属性注意事项:
     1.此属性可用于所有浏览器
     2.此属性值不允许设置为负值
     3.对于img标签,当设置width,未设置Height值时,
   其height根据图片尺寸自动按比例缩放

例:

 <meta charset="utf-8" />
<style>
   div{
    width:200px;
    height:20px;
    background-color:green;
    }
</style>
<p>
 maomao365.com <br />
 css 属性width示例说明
</p>
<hr />
<div>
  
</div>
css width属性值示例说明

css width属性值示例说明

javascript 原生态js代码如何设置Html元素的样式(className)呢?


摘要:
下文讲述使用原生态的js代码设置Html对象的类(className)的方法分享,如下所示:

实现思路:
    1.获取待设置样式的对象
    2.通过修改对象的className属性值即可达到修改className信息

例:
使用原生态js代码修改按钮的类样式

 <meta charset="utf-8" />
<style>
   input[type='button']{
     width:120px;
     height:40px;
     border:none;
   }
  .a{  background-color:green;color:white;}
  .b{  background-color:blue;color:white;}
</style>
<script>
 window.onload = function(){
   var i = document.getElementById("btn");
   var j =1;
   i.onclick = function(){
     if(j%2 ===0){
	 i.className ="a";
    }else
     {
	   i.className ="b";
     }  
     
     j++;
   }
 
 } 
</script>
<p>
 maomao365.com <br />
 javascript之js修改类信息(className)
</p>
<hr />


<input type="button" id="btn" class="a" value="改背景色" />
javascript 原生态js修改html标签的className示例分享

javascript 原生态js修改html标签的className示例分享

如何使input获取焦点时-变大,失去焦点时变小呢?


摘要:
下文讲述input获取焦点和失去焦点时状态发生变化的实现方法,如下所示:

实现思路:
    1.为input标签绑定onblur 和 onfocus事件
    2.事件中的函数修改其css属性
通过以上两种方法,可达到标题所说效果

例:

<meta charset="utf-8" />
<style>
  .a{  width:20px;}
  .b{ width:100px;}
</style>
<script>
 window.onload = function(){
   var i = document.getElementById("txtTest");
   i.onblur = function(){
	 i.className ="a"; 
   }

   i.onfocus = function(){
	  i.className ="b";
   }  

 } 
</script>
<p>
 maomao365.com <br />
 为input标签获取焦点和失去焦点设置样式
</p>
<hr />
<input type="text" id="txtTest" class="a" />
javascript 使用input大小随焦点变化而变化的示例分享

javascript 使用input大小随焦点变化而变化的示例分享