精华内容
下载资源
问答
  • JSX设置CSS样式详解

    千次阅读 2018-07-20 17:11:21
    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通CSS一样定义class选择器 background-color: red; color: ...

    JSX设置CSS样式详解

    1. 使用className设置样式(CSS的其他选择器也是同理)

    (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器

    .sty1{//和普通CSS一样定义class选择器
        background-color: red;
        color: white;
        font-size: 40px;
    }
    

    (2)在JSX中导入编写好的CSS文件

    import ‘./style.css’;

    (3)JSX的调用

    看背景颜色和文字颜色

    说明:id选择器也是同理,由于React使用ES6编写代码,而ES6又有class的概念,所以为了不混淆class选择器在React中写成了className
    可能你在看别人的代码的时候可能看到以下代码,这个是通过CSS Modules的写法
    (1)定义一个CSS文件styleother.css,和普通CSS一样定义class选择器

        .sty2{
            background-color: red;
            color: white;
            font-size: 40px;
        }

    (2)在JSX中导入编写好的CSS文件

    import StyleOther from  './styleother.css';

    (3)JSX的调用

    <div className={StyleOther.sty2}>看背景颜色和文字颜色</div>

    说明:使用这种方式也是可以的,只是你需要修改你的webpack的config文件,将loader: “style!css”修改为loader: “style!css?modules”,在css后面加一个modules,不过这两种方式是不能同时存在的,因为加了modules,
    详细资料:点击打开链接

    2. 使用React的行内样式样式设置样式

    (1)在JSX文件中定义样式变量,和定义普通的对象变量一样

        let backAndTextColor = {
            backgroundColor:'red',
            color:'white',
            fontSize:40
        };

    (2)JSX的调用

    <div style={backAndTextColor}>看背景颜色和文字颜色</div>

    当然你也可以不定义一个变量,直接写到JSX中,如下代码所示:

    <div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>

    分析:style={},这里的{}里面放的是对象,不管你是定义一个对象然后使用,还是直接在里面写对象都是可以的,甚至可以写成下面的样子

        style={this.getInputStyles()}
        getInputStyles方法根据不同的状态返回不同的样式
        getInputStyles() {
            let styleObj;
            if (this.state.focused == true) {
                styleObj = {outlineStyle: 'none'};
            }
            return styleObj;
        }

    3. JSX行内样式扩展

    在 React 中,行内样式并不是以字符串的形式出现,而是通过一个特定的样式对象来指定。在这个对象中,key 值是用驼峰形式表示的样式名,而其对应的值则是样式值,通常来说这个值是个字符串,如果是数字就不是字符串,不需要引号。

        var divStyle = {
          color: 'white',
          backgroundImage: 'url(' + imgUrl + ')',
          WebkitTransition: 'all', // 注意这里的首字母'W'是大写
          msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
        };

    另外浏览器前缀除了ms以外首字母应该大写,所以这里的WebkitTransition的W是大写的。
    当为内联样式指定一个像素值得时候, React 会在你的数字后面自动加上 “px” , 所以下面这样的写法是有效的:

        let backAndTextColor = {
            backgroundColor:'red',
            color:'white',
            fontSize:40
        };

    有时候你的确需要保持你的CSS属性的独立性。下面是不会自动加 “px” 后缀的 css 属性列表:

    columnCount
    fillOpacity
    flex
    flexGrow
    flexShrink
    fontWeight
    lineClamp
    lineHeight
    opacity
    order
    orphans
    strokeOpacity
    widows
    zIndex
    zoom
    
    展开全文
  • 使用jquery设置CSS样式

    千次阅读 2018-12-17 16:44:14
    使用css()方法获取和设置css样式 1.使用css()方法获取css属性的语法如下:  值=css(属性名); 2.使用css()方法设置css属性的语法如下: 一个属性:css(属性名,值); 多个属性:css({属性名1:值1,属性名2:值2...

    一.使用css()方法获取和设置css样式

    1.使用css()方法获取css属性的语法如下:

       值=css(属性名);

    2.使用css()方法设置css属性的语法如下:

    一个属性:css(属性名,值);

    多个属性:css({属性名1:值1,属性名2:值2})

    示例:使用css()方法设置css属性。

    <html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery(1).js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
    $("p").css({"background-color":"red","font-size":"200%"});
    });
    });
    </script>
    </head>
    <body>
    <h2>注意字体和背景色的变化<h2>
    <p>注意字体和背景色的变化</p>
    <p>注意字体和背景色的变化</p>
    <button type="button">点击我观察变化</button>
    </body>
    </html>

    二.与样式类别有关的方法

    可以通过class指定HTML元素的类别。jquery中与CSS类别有关的方法。

    1.addClass()方法:为匹配的HTML元素添加类别属性。

                           语法:addClass(classname) ,classname为要添加的类别名称。

    2.hasClass()方法:可以判断匹配的元素是否被拥有指定的类别。

                          语法:.hasClass(classname)

    如果匹配的元素拥有名为classname的类别,则hasClass()方法返回True;否则返回False。

    3.removeClass()方法:为匹配的HTML元素删除指定的class属性。也就是执行切换操作。

                                 语法:removeClass(classname),classname是要切换的类别名称

    4.toggleClass()方法:检查每个元素中指定的类。如果不存在则添加类,如果已设置则将其删除。

                              语法:toggleClass(classname),classname是要切换的类别名称

    示例:使用addClass()方法为HTML元素添加class属性的实例。

    <html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery(1).js"></script>
    <style>
    p{
    margin:8px;
    font-size:16px;
    }
    .selected{
    color:red;
    }
    .highlight{
    background:yellow;
    }
    </style>
    </head>
    <body>
    <p>注意我的变化</p>
    <button type="button" id="addClass">添加样式</button>
    <button type="button" id="removeClass">删除样式</button>
    <script type="text/javascript">
    $("#addClass").click(function(){
    $("p").addClass("selected highlight");
    });
    $("#removeClass").click(function(){
    $("p").removeClass("selected highlight");
    });
    </script>

    三.获取和设置HTML元素的尺寸

    1.height()方法:获取和设置元素的高度。语法如下:

    获取高度的语法:value=height();

    设置高度的语法:height(value);

    2.innerHeight()方法:获取元素的高度(包括顶部和底部的内边框)。

    语法:value=innerHeight();

    3.innerWidth()方法:获取元素的宽度(包括左侧和右侧的内边距)。

    语法:value=innerWidth();

    4.outerHeight()方法:获取元素的高度(包括顶部和底部的内边框、边框和外边距)。

    语法:value=outerHeight();

    5.outerWidth()方法:获取元素的宽度(包括左侧和右侧的内边距、边框和外边距)。

    语法:value=outerWidth();

    6.width()方法:获取和设置元素的宽度。语法如下:

    获取宽度的语法:value=width();

    设置宽度的语法:width(value);

    示例:获取html元素高度的实例。

    <html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery(1).js"></script>
    <style>
    button{
    font-size:12px;
    margin:2px;
    }
    p{
    width:150px;
    border:1px red solid;
    }
    div{
    color:red;
    font-weight:bold;
    }
    </style>
    </head>
    <body>
    <button id="getp">获取段落尺寸</button>
    <button id="getd">获取文档尺寸</button>
    <button id="getw">获取窗口尺寸</button>
    
    <div>&nbsp;</div>
    <p>用于测试尺寸的段落。</p>
    <script>
    function showHeight(ele,h){
       $("div").text(ele+"的高度为"+h+"px.");
    }
    $("#getp").click(function(){
     showHeight("段落",$("p").height());
    });
    $("#getd").click(function(){
     showHeight("文档",$(document).height());
    });
    $("#getw").click(function(){
     showHeight("窗口",$(window).height());
    });
    </script>
    </body>
    </html>

    四.获取和设置元素的位置。

    1.offset()方法:获取和设置元素在当前视窗的相对偏移(坐标)。

    获取坐标的语法:value=offset();

    设置坐标的语法:offset(value);

    2.position()方法:获取和设置元素相对父元素的偏移(坐标)。

    获取坐标的语法:value=position();

    设置坐标的语法:position(value);

    演示获取HTML元素位置的实例。

    <html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery(1).js"></script>
    <style>
    p{
    margin-left:10px;
    }
    </style>
    </head>
    <body>
    <p>Hello</p><p>2nd Paragraph</p>
    <script>
    var p=$("p:last");
    var offset=p.offset();
    p.html("left:"+offset.left+",top:"+offset.top);
    </script>
    </body>
    </html>

    五.滚动条相关

    1.scrollLeft()方法:获取或设置元素中滚动条的水平位置。

    获取滚动条的水平位置语法:value=scrollLeft();

    设置滚动条的水平位置语法:scrollLeft(value);

    2.scrollTop()方法:获取或设置元素中滚动条的垂直位置。

    获取滚动条的垂直位置语法:value=scrollTop();

    设置滚动条的垂直位置语法:scrollTop(value);

    <html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery(1).js"></script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("div").scrollLeft(20);
    });
    });
    </script>
    </head>
    <body>
    <div style="border:1px solid black;width:100px;height:130px;overflow:auto">
    The longest word in the english dictionary is:pneumonoultjdkjdkjnfjdknbfjbvbvkbvkjbjdknjksnjkdsnjkdndjkbdsjbfdjkbdjkbjk</div>
    <button class="btn1">把滚动条的水平位置设置为20px</button>
    </body>
    </html>

     

    展开全文
  • JS设置CSS样式的几种方式

    千次阅读 2019-09-17 22:26:43
    JS设置CSS样式的几种方式 1、直接设置style的属性 某些情况下用这个设置!import值无效 如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留"-"号,就使用中括号(如 element.style["text-align"]=...

    JS设置CSS样式的几种方式

    1、直接设置style的属性 某些情况下用这个设置!import值无效

    如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留"-"号,就使用中括号(如 element.style["text-align"]="100px")

    element.style.height = '100px';

    2、直接设置属性(只能用于某些属性,相关样式会自动识别)

    element.setAttribute('height', 100);
    element.setAttribute('height', '100px');

    3、设置style的属性

    element.setAttribute('style', 'height: 100px !important');

    4、使用setProperty,如果要设置!important,推荐使用这种方法设置第三个参数

    element.style.setProperty('height', '300px', 'important');

    5、改变class(使用js增加或删除某个属性,如class属性,通过这种方法来改变样式)

    element.className = 'blue';
    element.className += 'blue fb';

    6、设置cssText

    element.style.cssText = 'height: 100px !important';
    element.style.cssText += 'height: 100px !important';

    7、使用addRule、insertRule

    // 在原有样式操作
    document.styleSheets[0].addRule('.box', 'height: 100px');
    document.styleSheets[0].insertRule('.box {height: 100px}', 0);
    
    // 或者插入新样式时操作
    var styleEl = document.createElement('style'),
    styleSheet = styleEl.sheet;
    
    styleSheet.addRule('.box', 'height: 100px');
    styleSheet.insertRule('.box {height: 100px}', 0);
    
    document.head.appendChild(styleEl);

     

    展开全文
  • jq设置css样式和获取css样式

    千次阅读 2019-04-24 20:31:01
    < ! DOCTYPE ...获取CSS样式值 console . log ( $ ( "div" ) . css ( "background" ) ) ; ; } ) ; < / script > < / head > < body > < div > < / div > < / body > < / html >
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 编写jQuery相关代码
                // 1.逐个设置
                $("div").css("width", "100px");
                $("div").css("height", "100px");
                $("div").css("background", "red");
    
                // 2.链式设置
                // 注意点: 链式操作如果大于3步, 建议分开
                $("div").css("width", "100px").css("height", "100px").css("background", "blue");
    
                // 3.批量设置
                $("div").css({
                    width: "100px",
                    height: "100px",
                    background: "red"
                });
    
                // 4.获取CSS样式值
                console.log($("div").css("background"));;
            });
        </script>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    
    展开全文
  • JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如...
  • 一般我们经常用js去设置或获取的都是元素的内联(行内)样式! 例如: dom.style.width; //获取行内样式! dom.style.display = 'block'; //修改行内样式! 那么 如何设置 或 获取 外部样式、嵌入样式呢? ...
  • CSS相邻兄弟元素设置css样式

    千次阅读 2020-07-04 14:00:18
    <p class="print_pdf"></p><span>打印</span> /* CSS相邻兄弟选择器,控制打印span标签样式 */ p.print_pdf + span { position:relative;top:-4px;}
  • jquery设置css样式、style属性 示例

    万次阅读 2016-11-14 15:52:37
    css虽然会在一开始我们就定义好了,但是有很多场景需要我们动态设置css,或者单独修改一个dom控件的style属性,今天分享一下我总结的jquery设置css及style样式的方法。 一、CSS 1、css(name) 访问第一个匹配...
  • 用JS来动态设置CSS样式

    万次阅读 2018-08-23 15:31:43
    1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style....
  • js动态设置css样式和标签属性值

    千次阅读 2019-05-28 11:26:36
    使用js为css动态设置样式,有时候不起作用,或者在有的地方起作用,有的地方不起作用,没有找到原因,所以就在此记录下用到的方法 jquery的方法: attr()设置属性值 $(‘div’).attr(‘style’,‘width:60px;...
  • vue中如何使用v-if,v-else来设置css样式

    万次阅读 2018-05-06 12:59:26
    我们在使用vue项目开发时,v-if是使用的非常多的,在这里我们谈谈如何使用v-i来绑定修改css样式,使用的主要是双向数据绑定,即通过改变他的状态来改变他的样式,来个实例说明下: 第一步: 主要使用的是三元判断...
  • #设置窗口的位置和大小 self.setGeometry(300, 300, 500, 500) #设置窗口的标题 self.setWindowTitle('Example') #设置背景图片 palette1 = QPalette() palette1.setBrush(self.backgroundRole(), QBrush...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 680,093
精华内容 272,037
关键字:

如何设置css样式