CSS 样式类合并神器 classnames

html-css048

CSS 样式类合并神器 classnames,第1张

在前端项目中写样式,往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例,比如定义一个按钮:

再比如定义一个元素是否被激活:

区分这种样式常规的写法:

这种写法让人感觉非常的啰嗦,不优雅。而且如果判断条件和存在的样式类特别多,会写的很长很恶心。

如最常见的 Button 组件,它会有不同的样式、尺寸、显示方式、ghost 等等,这时候使用拼接和判断语句的方式都显得特别麻烦。

此时 classnames 闪亮登场!下面是它的用法:

classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子:

前后对比,明显优雅了很多。

回到按钮的问题,有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。

墙裂推荐 classnames!

这位网友你好,三角形边框只是利用了一个元素的边框,元素本身宽高都为0,把边框颜色设置为透明色,然后需要的一边设置为自己想要的颜色即可。

div{

  border:20px solid transparent

  border-left-color:#ff0000

}

例如上面就是一个向右的三角形。当然你可以可以利用左边框和下边框拼成一个大三角形,其他都类似。

根据你提供的信息,你是想直接通过接收GetCss()的参数来给jQuery对象设置样式。因此可以将GetCss方法改为:

var GetCss =function()

{

return {"height":"20px"}

}

即可。此处返回的值是json对象,而jQuery的css方法也接收json对象。如果想在GetCss方法中添加更多的css样式属性,可

var GetCss =function()

{

return {"height":"20px","width":"40px"}

}

即可达到你想要的效果,注意json对象中每组属性间要以逗号分隔。