Question

我有一个页面，用户在其中输入抽搐用户名。然后，它会使用javascript创建带有人抽动详细信息（姓名，在线或离线等）的iframe，然后他们可以在自己的网站上使用此iframe。

但是，框架的样式由CSS文件确定。我想要的是让用户使用颜色选择器选择背景和字体颜色，以便他们使iframe匹配自己的网站主题。

我将如何处理？我不想编辑CSS文件，因为这会为每个在其网站上使用iframe的人更改它。

我看过一个网站，他们在其中创建专门用于所选颜色的目录，例如www.mysite.com/01234/098766/username。但是不知道如何实现。

Answer 1

我将如何处理？

可以从js修改样式，或者您只发布另一个具有用户特定颜色的css文件，该文件将覆盖另一个颜色：

router.get("/event/:user_id", (req, res) => {

  const user_id=req.params.user_id;
  console.log(user_id);

  User_impression.aggregate([
    {$match:{"impression_type":"like"}},

   {$group: { "_id": "$event_id","user_id":{"$first":"$user_id"},"impression_type":{"$first":"$impression_type"},count: { $sum: 1  }}},
   {$lookup: { from: "events", localField: "_id", foreignField: "_id",as: "event_doc"}},
   {$lookup: { from: "users", localField: "event_doc.user_id", foreignField: "_id",as: "user_doc"}},
   //{$match:{$and :[{"event_doc.is_deleted":false},{"event_doc.public":true},{"event_doc.title":{"$regex": search, "$options": "i"}}]}},
   {$project :{"Event_id":"$_id","likes":"$count","impression_type":"$impression_type","user_id":"$user_id","islike":{$cond: { if: { $in: [ "$_id", "$event_doc._id"] }, then: "Yes", else: "No" } },"User_doc":"$user_doc","event_doc":"$event_doc"}},


    ], function (err, result) {
        if (err) {
            res.send(

                setting.status(validation.NOT_FOUND,"False","No data found",err)

            );
        }else
        {   
      results=result;
      console.log("$_id")
            res.send(

                setting.status(validation.SHOW,"True","data found",result)

            );
        }
    });
});

我看过一个网站，他们在其中创建特定于所选颜色的目录，例如www.mysite.com/01234/098766/username

他们没有目录，那就是路由。服务器采用请求的路径，将其拆分，然后将各个部分作为参数。如何做到这一点取决于您的后端。

Answer 2

您可以使用输入颜色选择器

function colorSelected (element) {
    document.body.style.background = element.value
}

<div>
  Pick a color <input onchange="colorSelected(this)" type="color">
</div>

允许用户选择颜色

2 个答案: