如何在javascript中插入css？

This is my script

这是我的剧本

<script type = "text/javascript">
        function pic1()
        {
            document.getElementById("img").src = "../images/images/1.png";
        }
        function pic2()
        {
            document.getElementById("img").src = "../images/images/2.png";
        }
</script>

This is my html

这是我的HTML

<span class="background" style="width: 950px; height: 642px; top: 0px; left: 0px">
</span>
<span class="car">
<img src = "../images/images/1.png" id = "img" /> 
</span>
<span class="car2">
<img src = "../images/thumbs/3.png"<input type="button" value="show"onclick="pic2()" />
</span>

And I want to add css for each element as "Images" to be showed in one position and thumb in other. It should to be something like this. Car or pic2() should to be in middle of page and car-colour in bottom side of page.

我想为每个元素添加css作为“图像”在一个位置显示,拇指在另一个位置显示。它应该是这样的。汽车或pic2()应位于页面中间,页面底部应为汽车颜色。

        .car
        {
            position: absolute;
            cursor: pointer;
            display: block;
            overflow:hidden;
            margin:0;
            padding: 0;
            width: 638px; 
            height: 274px; 
            top: 200px; 
            left: 150px;
        }
        .car-colour
        {
            position: absolute;
            cursor: pointer;
            display: block;
            overflow:hidden;
            margin:0;
            padding: 0;
            width: 70px; 
            height: 70px; 
            top: 500px; 
            left: 80px;
        }

SOLVED

        .car
        {
            position: absolute;
            cursor: pointer;
            display: block;
            overflow:hidden;
            margin:0;
            padding: 0;
        }

<span class="car" style="width: 638px; height: 274px; top: 200px; left: 150px;">
<img src = "../images/images/1.png" id = "img" />
</span>

2 个解决方案

#1

Use a separate css file is better.

使用单独的css文件更好。

Style.css :

.car
{
    position: absolute;
    cursor: pointer;
    display: block;
    overflow:hidden;
    margin:0;
    padding: 0;
{

#img
{
    width: 638px;
    height: 274px; 
    top: 200px; 
    left: 150px;
{

Page.html :

<head>
...
<link type="text/css" rel="stylesheet " href="style.css">
...
</head>
<body>
...
<span class="car">
<img src = "../images/images/1.png" id = "img" />
</span>
...
</body>

#2

Span is inline element of block level element, and image has its owne width and height so boarder height could not apply to over image.

Span是块级元素的内联元素,图像具有其所有的宽度和高度,因此较大的高度不适用于过度图像。

Try with the below url:[Sample URL][1]

尝试使用以下网址:[示例网址] [1]

[1]: http://jsfiddle.net/sathyanaga/4x4jvr00/

#1