Question

我正在为其他网站开发一个Javascript小部件。我有2个javascripts和一个php文件。一个Javascript供用户使用，其他用于制作JSON请求和php来挖掘数据。事情进展顺利，数据也在显示。

现在我需要将CSS添加到小部件中。我不希望用户在他们身边编写CSS代码。我该怎么做？我需要所有内联css代码吗？或者在javascript中附加一个css文件？

我知道这是非常基本的。但是，我不熟悉这些东西。所以，如果你们这些人指出了正确的方向，那就太好了。我也需要示例代码。我查了很多网站。他们只是有javascript代码。

谢谢！

    End user Javascript
------------------------

<script type="text/javascript" src="http://mydomain.com/userwidget.js"></script>
<div id="results">
</div>
<script type="text/javascript">
ajax_get_my_data();
</script>

AJAX Javascripit
----------------

function ajax_get_my_data(){
    var results = document.getElementById("results");
    var hr = new XMLHttpRequest();
    hr.open("POST", "http://mydomain.com/widgets/userwidgetcore.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            results.innerHTML = "";
            for(var obj in data){
                results.innerHTML += data[obj].propertyA;
            }
        }
    }
    hr.send("var1=stock&var2=up");
    results.innerHTML = "requesting...";
}


PHP code
------------

<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
...........
Databse logic
.......

         $_out = '<table id=\"rounded-corner\">';
         $_out .= '<thead>';
         $_out .= '<tr>';
         $_out .= '<th colspan=\"3\" scope=\"col\" class=\"rounded-q6\">Stocks Under Accumulation</th>';
         $_out .= '</tr>';      
         $_out .= '<tr>';
     $_out .= '<th scope=\"col\" class=\"rounded-q5\">Ticker</th>';
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Price % Change</th>'; 
         $_out .= '<th scope=\"col\" class=\"rounded-q5\">Volume % Change</th>'; 
     $_out .= '</tr>';
        $_out .= '</thead>';
    $_out .= '<tbody>';

  ..............  
 ..................
$jsonData = $_out;
echo $jsonData;
?>

现在我需要将css加载到标签。我该怎么做？

Answer 1

我不明白你的想法但是完全没有 css代码有3种方式

首先在这样的html页面内

<head>
<title>hello</title>
<style type="text/css">
body
{
background-color: #CC0000;
}
</style>
</head>

第二个有页面并将其包含在这样的html页面中页面保存名称“sheet.css”
并在像这样的关闭之前包括它

<link rel="stylesheet" href="css/sheet.css" media="screen"/>

像js这样的最后一个方式

$("body").css("background-color","#CC0000");

Answer 2

您可以通过javascript

将其附加到页面的头部

var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "filename.css");
  document.getElementsByTagName("head")[0].appendChild(fileref);

将CSS添加到Javascript小部件

2 个答案: