JS里添加样式

JavaScript021

JS里添加样式,第1张

JS里添加样式的方法：

1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。

2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。

3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。

4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。

5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。

6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。

select属于浏览器内置组件，标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

<div class="mySelect"></div>

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

<div class="mySelect">

    <div class="mySelectValue"></div>

    <div class="mySelectDropdown"></div>

    <ul class="mySelectOptions"></ul>

</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）

// 创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）

var $mySelect = $('<div class="mySelect">...</div>')

// 把原来select有的样式复制到模拟的下拉框上

$mySelect.attr('class', $('#select').attr('class'))

$mySelect.attr('style', $('#select').attr('style'))

// 把原来select的选项复制到模拟的下拉框中

$('#select option').each(function () {

    var value = $(this).attr('value'),

        name  = $(this).html()

    $mySelect.find('.mySelectOptions').append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>')

})

// 在模拟下拉框中设置选中的值

$mySelect.find('.mySelectValue').html($('#select option:selected').html())

// 隐藏原有的select

$('#select').hide()

// 给模拟的下拉框绑定事件

$mySelect

    .on('click', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 反转下拉列表的显示

        $('.mySelectOptions', this).toggle()

        // 给原有的select模拟点击事件

        $('#select').trigger('click')

    })

    .on('click', '.mySelectOption', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 把选中的值显示到模拟的下拉框中

        $mySelect.find('.mySelectValue').html($(this).html())

        // 隐藏下拉列表

        $mySelect.find('.mySelectOptions').hide()

        // 把选中的值给到原来的select中

        $('#select').val($(this).data('id'))

        // 给原来的select模拟change事件

        $('#select').trigger('change')

    })

// 基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。

if(i==index){

contents[i].style.display = "block"

} else {

contents[i].style.display = "none"

}

把你的上面这段换成下面的试试

if(i==index){

contents[i].style.display = "block"

contents[i].style.color = "red"

} else {

contents[i].style.display = "none"

contents[i].style.color = "black"

}