如何將后臺(tái)返回的html字符串轉(zhuǎn)換為可操作的jquery對(duì)象

問(wèn)題描述

后端已字符串的形式返回完整的html頁(yè)面供前端打印，我想在打印之前修改一部分樣式。請(qǐng)問(wèn)如何用jquery修改？

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

使用$(str)，str為后臺(tái)返回的完整頁(yè)面字符串

相關(guān)代碼

$(str).find(".print_paper:first").css("height","45px");

回答

編輯回答

詆毀你

你先把那段html插入到div里面去，然后再用jq操作

2017年1月13日 14:20

編輯回答

終相守

可以用DocumentFragment暫存這個(gè)node試試。

var string = '<div id="a"><p id="b">2222</p></div>';
var fragment = document.createDocumentFragment();
var div = document.createElement('div');
div.innerHTML = string;
fragment.appendChild(div);
fragment.getElementById('b').style.color = 'red';
console.log(fragment);

2017年5月5日 07:16

編輯回答

胭脂淚

我的思路

使用字符串處理方式，強(qiáng)行給html字符串父節(jié)點(diǎn)，替換上一個(gè) style="dispaly:none"
輸出修改后的html到頁(yè)面上，此時(shí)html不可見(jiàn)，但是可以被jquery操作了
按你的想法盡情使用jquery操作吧
將那段html的父節(jié)點(diǎn)樣式設(shè)置為可見(jiàn) "display:block"

2018年7月21日 15:25

編輯回答

薔薇花

這個(gè)跟jquery沒(méi)什么關(guān)系吧

如果你返回的是一個(gè)這樣的頁(yè)面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box{
            color:black;
        }
    </style>
</head>
<body>
    <div class="box">測(cè)試</div>
</body>
</html>

這時(shí)肯定一字符串，用不了什么方法，你要做的就是處理這個(gè)字符串，比如你想把這個(gè).box的樣式改成紅色，那么，你就需要把這樣的樣式塞進(jìn)這個(gè)字符串中，就可以替換原來(lái)的樣式了

<style>
    .box{
        color:red;
    }
</style>

具體的實(shí)現(xiàn)要看你返回的頁(yè)面字符串有什么特點(diǎn)，比如我上面示例的這個(gè)，就可以這么處理

var html = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box{
            color:black;
        }
    </style>
</head>
<body>
    <div class="box">測(cè)試</div>
</body>
</html>`

var css = `
<style>
    .box{
        color:red;
    }
</style>`

//把這個(gè)字符串拆開(kāi)再合并，你很多種方式，這里只是其中一種
var _html = html.split('</head>')[0]+css+'</head>'+html.split('</head>')[1]

--------

返回結(jié)果

> _html
"
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box{
            color:black;
        }
    </style>

<style>
    .box{
        color:red;
    }
</style></head>
<body>
    <div class="box">測(cè)試</div>
</body>
</html>"

2018年3月20日 19:07