Question

我有一些黑色文字的链接。根据用户在下拉列表中选择的内容，我应用以下CSS来更改匹配的链接。如果用户然后选择打印他们正在查看的视图，那么相同的链接将以黑色文本打印出来。如何让CSS转移到打印视图，以便用户看到他们在屏幕上看到的相同颜色？

$this.find('a').css("color", "#bfbfbf");
$this.find('.fa-play').css("color", "#bfbfbf");
$this.find('.fa-check-circle').css("color", "#bfbfbf");

Answer 1

以下代码会在处于打印模式时影响内部任何元素的CSS：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#969696">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#023956">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:src="@drawable/ic_group"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:id="@+id/notificationButtonId"
            android:background="?android:attr/selectableItemBackground"
            android:paddingRight="10dp" />

    </RelativeLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/swipeRefreshLayoutId">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                android:paddingBottom="10dp"
                android:descendantFocusability="blocksDescendants">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Share you thoughts here..."
                    android:paddingLeft="10dp"
                    android:padding="20dp"
                    android:elevation="5dp"
                    android:id="@+id/editTextWritePostId" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:fitsSystemWindows="true"
                    android:background="#f9f9f9">

                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Post"
                        android:textColor="#ffffff"
                        android:background="#1470a6"
                        android:id="@+id/postButtonId" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/checkInButtonId"
                        android:layout_toLeftOf="@+id/smileyButtonId"
                        android:layout_centerInParent="true"
                        android:src="@drawable/ic_action_cart"
                        android:background="@android:color/transparent"
                        android:layout_marginRight="3dp" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/ic_play"
                        android:layout_toLeftOf="@+id/imageUploadButtonId"
                        android:layout_centerInParent="true"
                        android:layout_marginRight="10dp"
                        android:id="@+id/smileyButtonId" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/ic_camera"
                        android:layout_centerInParent="true"
                        android:layout_alignParentEnd="true"
                        android:layout_marginRight="10dp"
                        android:id="@+id/imageUploadButtonId" />
                </RelativeLayout>

                <GridView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/gridViewId"
                    android:layout_below="@+id/postButtonId"
                    android:numColumns="auto_fit"
                    android:columnWidth="100dp"
                    android:verticalSpacing="10dp"
                    android:horizontalSpacing="10dp"
                    android:layout_marginTop="5dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="0dp" />

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/recyclerviewId_newsFeed"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:nestedScrollingEnabled="false" />

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

在上例中，任何跨度的颜色在打印模式下都是黑色。

编辑：2017年10月28日 基于@TamirNahum建议的评论，我已经想到了这一点。以下是完整的答案。

jQuery .addClass将注入“定制链接”类。进入与下拉选择匹配的每个元素。

@media print {
   span {
      color: black;
   }
}

然后，当用户选择打印页面时，以下CSS将显示＆＃34; Tailored Links＆＃34;灰色。

$this.find('a').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-play').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-check-circle').css("color", "#bfbfbf").addClass("tailoredLink");

将CSS应用于打印的链接

1 个答案: