cssswitch样式的简单介绍

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

怎么让input里的text和button使用不同的css样式

可以用js也可以用css来控制：

比如：用js来控制：：

script language=javascript

switch(type)

{

case 'text':

style.backgroundColor="red";

break;

case 'password':

style.backgroundImage="url(BG.gif)";

break;

case 'submit':

style.backgroundColor="blue";

style.color="white";

break;

case 'reset':

style.backgroundColor="navy";

style.color="white";

break;

case 'radio':

style.backgroundColor="hotpink";

break;

case 'checkbox':

style.backgroundColor="green";

break;

case 'button':

style.backgroundColor="lightblue";

break;

default: ;//others use default style.

}

/script

相关问答

Q1: JS问题，求问更改css属性的问题。XX.style.background="red"不是正确的吗？这里怎么不行

style[] 其实就是返回的是一个CSS样式声明对象([object CSSStyleDeclaration])

其实我们直接用.XXX去做一个样式的改变时候就像我们用window.onload 一样调用了window对象的onload方法，当然我们用.去直接调用对象中的方法或者内容的时候是严格区分大小的。

其实主要的问题是style. 后面的参数在js内部虚拟机的解析问题，因为你是通过来的参数

就是好比arr 就是width

obj.style.arr = '1px';

这里的arr js会认为arr是css对象中的一个属性

obj.style[arr] = '1px'

这里的arr js会将arr实意后找到css对象中的属性

当然这样也是不行的

obj.style['arr'] = '1px'

我也不知道楼主能不能懂，但是就是这么一个意思，如果楼主质执意要用style.width = xx;

可以用过switch进行设置

switch(arr)

case 'width' : obj.style.width = '1px';

Q2: 使用CSS样式...将多行文字右端对齐；例如：第一行文字：哥哥第二行文字：你哥哥

纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery

div id="main"

p class="tocenterRight"哥哥/p

p class="tocenterRight"你哥哥/p

p class="tocenterRight"你的大哥哥/p

/div

script src="jquery-3.2.1.min.js" type="application/javascript"/script

script

$(document).ready(function(){

//传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。

textAlign("center-right",".tocenterRight");

});

var textAlign = function(type,classname){

var o = $(classname);

var maxwidth = 0;

switch (type){

case "center-right" :

$(o).css("text-align","right");

if(o.length0){

$(o).css("width",parseInt($($(o).parent()).width()/2));

}else{

console.log("找不到任何对象！");

}

break;

case "left-right" :

$(o).css("text-align","right");

if(o.length0){

for(var i=0;io.length;i++){

$(o[i]).css("display","inline");

maxwidth = parseInt($(o[i]).css("width"))maxwidth ? parseInt($(o[i]).css("width")) : maxwidth;

}

$(o).css("display","block");

$(o).css("width",maxwidth);

}else{

console.log("找不到任何对象！");

}

break;

default :

break;

}

/script

两种对齐的效果看下图：

Q3: 如何更改select option 边框颜色和选中的颜色，css优先，js次之??

HTML是超文本标记语言的缩写（HyperText Markup Language），作用是利用HTML标记，告诉浏览器被标记的内容要如何摆放及内容的含义，如：p这是个段落元素/p，这里，被标记的内容是“这是个段落元素”这句话，而p/p则是HTML的标记；当浏览器读取到这个标记时，就会知道这里的内容是一个段落文本，然后用相应的格式显示。

HTML的语法规则：

要让页面正确的显示，就必须使用正确的HTML语法和HTML元素，如：对于标题应该使用h1、h2、h3...等标题元素，而对于一整段的文字内容则应该使用p元素

一个规范的页面代码有利于维护和阅读，要想知道自己的HTML代码是否规范，可以使用w3school的HTML验证工具来检查，然后根据检查结果进行调整，直至通过验证为止。

用一个实际的例子来总结以上的内容：

左边是源代码，右边是运行结果

页面通过w3school验证工具的验证。

HTML常用标签

1.p段落标签/p ：用来定义网页中的一段文本，段落与段落之间换行。

属性：align ；定义段落中的文本水平方向的对齐方式。

属性值：left（左对齐）、right（右对齐）、center（居中对齐）

2.br/ ：换行标签，指行与行之间换行，他是一个单标签。

两者的区别：